/* ── Kling Ads — Shared Base Styles ── */

:root {
  --base: 255 252 245;
  --ink: 46 34 17;
  --accent: 165 108 254;
  --accent-text: 255 255 255;
  --emerald: 22 163 74;
  --emerald-light: 209 250 229;
  --phone-w: 280px;
  --phone-h: 540px;
  --hl-size: 23px;
  --hl-max-w: 460px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Gabarito', sans-serif;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  background: rgb(var(--accent));
}

/* ── Ratio-specific CSS layout dimensions ── */
body.ratio-9x16 { --css-w: 540px; --css-h: 960px; }
body.ratio-4x5  { --css-w: 540px; --css-h: 675px; --phone-w: 230px; --phone-h: 440px; --hl-size: 20px; --hl-max-w: 400px; }
body.ratio-1x1  { --css-w: 540px; --css-h: 540px; --phone-w: 200px; --phone-h: 380px; --hl-size: 19px; --hl-max-w: 380px; }
body.ratio-16x9 { --css-w: 960px; --css-h: 540px; --phone-w: 210px; --phone-h: 400px; --hl-size: 22px; --hl-max-w: 380px; }

/* Hi-res recording: CSS layout at half size, scale 2x to fill output resolution */
body[class*="ratio-"] {
  width: var(--css-w);
  height: var(--css-h);
  transform: scale(2);
  transform-origin: top left;
}

#stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* ── Background layers ── */
.bg-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease;
  z-index: 0;
}
.bg-layer.active { opacity: 1; }
.bg-purple { background: rgb(var(--accent)); }
.bg-lime   { background: #E6FF02; }
.bg-peach  { background: #FFD166; }
.bg-pink   { background: #FF6B9D; }
.bg-cream  { background: rgb(var(--base)); }

/* ── Floating deco shapes ── */
.deco {
  position: absolute;
  z-index: 1;
  border: 3px solid rgb(var(--ink));
  opacity: 0;
  transition: opacity 0.6s ease;
}
.deco.visible { opacity: 0.7; }
.deco-1 { width: 55px; height: 55px; border-radius: 50%; top: 7%; left: 5%; background: #E6FF02; animation: drift1 7s ease-in-out infinite; }
.deco-2 { width: 40px; height: 40px; top: 14%; right: 7%; background: #FFD166; animation: drift2 8s ease-in-out infinite; }
.deco-3 { width: 35px; height: 35px; transform: rotate(45deg); bottom: 16%; left: 8%; background: #FF6B9D; animation: drift3 6s ease-in-out infinite; }
.deco-4 { width: 50px; height: 50px; border-radius: 50%; bottom: 10%; right: 5%; background: rgb(var(--accent)); animation: drift1 9s ease-in-out infinite; }
.deco-5 { width: 30px; height: 30px; top: 45%; left: 2%; background: rgb(var(--base)); animation: drift2 7s ease-in-out infinite; }
.deco-6 { width: 38px; height: 38px; transform: rotate(45deg); top: 50%; right: 3%; background: #E6FF02; animation: drift3 8s ease-in-out infinite; }

@keyframes drift1 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(8px,-12px); } }
@keyframes drift2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-10px,8px); } }
@keyframes drift3 { 0%,100% { transform: translate(0,0) rotate(45deg); } 50% { transform: translate(6px,10px) rotate(50deg); } }

/* ── Headline ── */
.headline-wrap {
  position: relative;
  z-index: 10;
  text-align: center;
  min-height: 60px;
  max-width: var(--hl-max-w);
  padding: 0 20px;
  margin-bottom: 18px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.headline {
  font-size: var(--hl-size);
  font-weight: 800;
  line-height: 1.18;
  color: rgb(var(--ink));
  opacity: 0;
  transition: opacity 0.4s ease;
}
.headline.visible { opacity: 1; }
.headline.on-light { color: rgb(var(--ink)); }
.headline.on-dark { color: rgb(var(--base)); }
.cursor-blink {
  display: inline-block;
  width: 3px;
  height: 0.85em;
  background: currentColor;
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: blink 0.55s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ── Phone frame ── */
.phone-wrap {
  position: relative;
  z-index: 10;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.phone-wrap.visible { opacity: 1; transform: translateY(0); }

.phone {
  width: var(--phone-w);
  height: var(--phone-h);
  border: 4px solid rgb(var(--ink));
  border-radius: 34px;
  overflow: hidden;
  box-shadow: 8px 8px 0 rgb(var(--ink));
  background: rgb(var(--base));
  position: relative;
}

/* ── Screens (stacked inside phone) ── */
.scr {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: opacity 0.45s ease;
  background: rgb(var(--base));
  overflow: hidden;
}
.scr.active { opacity: 1; z-index: 2; }

.pos-hdr {
  text-align: center;
  padding: 18px 16px 10px;
  font-size: 15px;
  font-weight: 700;
  color: rgb(var(--ink));
  letter-spacing: -0.01em;
}

/* ── Logo scene ── */
.logo-scene {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s ease;
}
.logo-scene.visible { opacity: 1; }
.logo-scene svg { width: 320px; height: auto; }

.logo-wordmark { opacity: 0; transform: translateX(20px); transition: opacity 0.5s ease 0.4s, transform 0.5s ease 0.4s; }
.logo-scene.visible .logo-wordmark { opacity: 1; transform: translateX(0); }

.logo-icon-g { opacity: 0; transition: opacity 0.4s ease; }
.logo-scene.visible .logo-icon-g { opacity: 1; }

.coin-toss { transform-origin: 65px 50px; }
.logo-scene.visible .coin-toss {
  animation: toss 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both;
}
@keyframes toss {
  0%   { transform: translateY(0) rotate(0deg); }
  25%  { transform: translateY(-40px) rotate(12deg); }
  45%  { transform: translateY(-50px) rotate(-8deg); }
  65%  { transform: translateY(-25px) rotate(5deg); }
  80%  { transform: translateY(-8px) rotate(-2deg); }
  100% { transform: translateY(0) rotate(0deg); }
}
.logo-scene.visible .coin-idle {
  animation: idle-bob 2.5s ease-in-out 2s infinite;
}
@keyframes idle-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* ── Play overlay ── */
#play-btn {
  position: fixed; inset: 0; z-index: 100;
  background: rgb(var(--accent));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; border: none; cursor: pointer;
  font-family: inherit; transition: opacity 0.45s ease;
}
#play-btn.hidden { opacity: 0; pointer-events: none; }
.play-circle {
  width: 100px; height: 100px; border-radius: 50%;
  border: 4px solid rgb(var(--ink));
  background: #E6FF02;
  box-shadow: 6px 6px 0 rgb(var(--ink));
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.2s ease;
}
#play-btn:hover .play-circle { transform: scale(1.06); }
.play-tri {
  width: 0; height: 0;
  border-style: solid;
  border-width: 20px 0 20px 34px;
  border-color: transparent transparent transparent rgb(var(--ink));
  margin-left: 6px;
}
.play-text {
  font-size: 16px; font-weight: 700;
  color: rgb(var(--base));
  letter-spacing: 3px; text-transform: uppercase;
}

/* ── 16:9 Landscape: headline + phone side by side ── */
body.ratio-16x9 #stage {
  flex-direction: row;
  gap: 40px;
  padding: 0 50px;
}
body.ratio-16x9 .headline-wrap {
  flex: 1;
  min-height: auto;
  margin-bottom: 0;
  align-items: center;
  text-align: left;
  justify-content: flex-start;
}
body.ratio-16x9 .headline { text-align: left; }
body.ratio-16x9 .phone-wrap { flex-shrink: 0; }
body.ratio-16x9 .logo-scene svg { width: 260px; }
body.ratio-16x9 .deco-1 { width: 40px; height: 40px; }
body.ratio-16x9 .deco-2 { width: 30px; height: 30px; }
body.ratio-16x9 .deco-3 { width: 28px; height: 28px; }
body.ratio-16x9 .deco-4 { width: 36px; height: 36px; }
body.ratio-16x9 .deco-5 { width: 22px; height: 22px; }
body.ratio-16x9 .deco-6 { width: 28px; height: 28px; }

/* ── 1:1 Square: tighter spacing ── */
body.ratio-1x1 #stage { gap: 0; padding: 10px 0; }
body.ratio-1x1 .headline-wrap { min-height: 50px; margin-bottom: 10px; }
body.ratio-1x1 .phone { border-radius: 26px; border-width: 3px; box-shadow: 6px 6px 0 rgb(var(--ink)); }
body.ratio-1x1 .logo-scene svg { width: 240px; }
body.ratio-1x1 .deco-1 { width: 35px; height: 35px; }
body.ratio-1x1 .deco-2 { width: 26px; height: 26px; }
body.ratio-1x1 .deco-3 { width: 22px; height: 22px; }
body.ratio-1x1 .deco-4 { width: 32px; height: 32px; }
body.ratio-1x1 .deco-5 { width: 18px; height: 18px; }
body.ratio-1x1 .deco-6 { width: 24px; height: 24px; }

/* ── 4:5 Portrait: slightly tighter ── */
body.ratio-4x5 #stage { gap: 0; }
body.ratio-4x5 .headline-wrap { min-height: 55px; margin-bottom: 12px; }
body.ratio-4x5 .phone { border-radius: 28px; border-width: 3px; box-shadow: 6px 6px 0 rgb(var(--ink)); }
body.ratio-4x5 .logo-scene svg { width: 260px; }
body.ratio-4x5 .deco-1 { width: 42px; height: 42px; }
body.ratio-4x5 .deco-2 { width: 32px; height: 32px; }
body.ratio-4x5 .deco-3 { width: 28px; height: 28px; }
body.ratio-4x5 .deco-4 { width: 38px; height: 38px; }
body.ratio-4x5 .deco-5 { width: 22px; height: 22px; }
body.ratio-4x5 .deco-6 { width: 28px; height: 28px; }