/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: white;
  color: black;
  font-family: Verdana;
}

/* ===== A + K FULL PANEL HEART (NO ARROW) ===== */
.akWrap{
  height: 100%;
  display: grid;
  grid-template-rows: 1fr auto; /* stage fills, footer sits below */
  gap: 14px;
}

/* Make the right panel act like a full-height container */
.content .panel:last-child{
  display:flex;
  flex-direction:column;
  min-height: 520px; /* ensures it doesn't collapse on tall screens */
}

.akStage{
  position:relative;
  width: 100%;
  height: 100%;            /* THIS is what extends to the red line */
  min-height: 420px;       /* fallback */
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.14);
  overflow:hidden;

  background:
    radial-gradient(900px 520px at 50% 20%, rgba(255,77,141,.22), transparent 60%),
    radial-gradient(700px 460px at 60% 55%, rgba(255,134,183,.18), transparent 62%),
    rgba(0,0,0,.10);

  display:grid;
  place-items:center;
}

/* Subtle moving glow so it feels premium */
.akGlow{
  position:absolute;
  inset:-40%;
  background: conic-gradient(from 180deg at 50% 50%,
    rgba(255,77,141,.10),
    rgba(255,255,255,.05),
    rgba(255,134,183,.10),
    rgba(255,255,255,.04),
    rgba(255,77,141,.10));
  filter: blur(26px);
  opacity:.55;
  animation: akSpin 16s linear infinite;
  pointer-events:none;
}
@keyframes akSpin{to{transform:rotate(360deg)}}

/* BIG heart in the center */
.akHeartBig{
  width: min(420px, 78%);
  aspect-ratio: 1 / 1;
  position: relative;
  transform: rotate(45deg);
  border-radius: 12%;
  background: rgba(255,77,141,.92);
  box-shadow:
    0 0 42px rgba(255,77,141,.55),
    0 30px 120px rgba(0,0,0,.35);
  animation: akBeat 1.25s ease-in-out infinite;
}

/* heart lobes */
.akHeartBig::before,
.akHeartBig::after{
  content:"";
  position:absolute;
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: 50%;
}
.akHeartBig::before{ left:-50%; top:0; }
.akHeartBig::after{ left:0; top:-50%; }

/* A + K label (separate from heart so it stays crisp) */
.akLabel{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;

  font-weight: 900;
  letter-spacing: 2px;
  font-size: clamp(44px, 5.2vw, 84px);

  transform: translateY(2px); /* tiny optical alignment */
  text-shadow: 0 18px 60px rgba(0,0,0,.55);

  background: linear-gradient(135deg, rgba(255,230,242,1), rgba(255,255,255,.95));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;

  animation: akTextPulse 1.25s ease-in-out infinite;
  pointer-events:none;
}
.akPlus{
  display:inline-block;
  transform: translateY(-2px);
  opacity:.95;
}

/* Footer text (kept neat) */
.akFooterText{
  font-size: 13px;
  color: rgba(255,255,255,.72);
  line-height: 1.5;
  padding: 2px 2px 0;
}

/* Heart beat animation (never disappears) */
@keyframes akBeat{
  0%   { transform: rotate(45deg) scale(0.98); filter: brightness(1); }
  20%  { transform: rotate(45deg) scale(1.08); filter: brightness(1.05); }
  40%  { transform: rotate(45deg) scale(0.96); filter: brightness(0.98); }
  60%  { transform: rotate(45deg) scale(1.04); filter: brightness(1.03); }
  100% { transform: rotate(45deg) scale(0.98); filter: brightness(1); }
}

/* Label pulse synced to heart */
@keyframes akTextPulse{
  0%   { transform: scale(0.985); filter: blur(0px); opacity:1; }
  20%  { transform: scale(1.03);  filter: blur(0px); opacity:1; }
  40%  { transform: scale(0.98);  filter: blur(0px); opacity:.98; }
  60%  { transform: scale(1.01);  filter: blur(0px); opacity:1; }
  100% { transform: scale(0.985); filter: blur(0px); opacity:1; }
}

/* Mobile tweaks */
@media (max-width: 860px){
  .content .panel:last-child{ min-height: 420px; }
  .akStage{ min-height: 320px; }
  .akHeartBig{ width: min(360px, 86%); }
}