@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Manrope:wght@600;700;800&display=swap");

:root{
  --ink:#381149; --deep:#4a1760; --violet:#73399c; --orchid:#a85bc9;
  --lilac:#dcbbea; --gold:#efca5b; --leaf:#4f7954; --paper:#fffdf6;
}

*{ box-sizing:border-box; }
html{ height:100%; background:#ffffff; }
body{
  margin:0;
  min-height:100%;
  background:#ffffff;
  font-family:Manrope, Arial, sans-serif;
  color:var(--ink);
  overscroll-behavior:none;
}

.app{
  position:relative;
  width:100%;
  height:100vh;
  height:100dvh;
  min-height:480px;
  overflow:hidden;
  background:#ffffff;
}

/* ---------- INTRO ---------- */
.intro{
  position:absolute;
  inset:0;
  z-index:5;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:26px;
  text-align:center;
  background:#ffffff;
  transition:opacity .6s ease, transform .7s cubic-bezier(.55,0,.3,1), visibility .7s;
}
.app.go .intro{
  opacity:0;
  transform:scale(1.06);
  visibility:hidden;
  pointer-events:none;
}

.sparkle-field{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1; }
.spark{
  position:absolute;
  font-style:normal;
  font-family:Georgia, serif;
  opacity:0;
  animation-name:twinkle;
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
}
.spark.gold{ color:var(--gold); }
.spark.violet{ color:var(--orchid); }
.s1{ left:9%;  top:18%; font-size:30px; animation-duration:3.1s; animation-delay:.1s; }
.s2{ left:22%; top:32%; font-size:18px; animation-duration:3.6s; animation-delay:.5s; }
.s3{ left:82%; top:16%; font-size:26px; animation-duration:2.9s; animation-delay:.9s; }
.s4{ left:90%; top:38%; font-size:16px; animation-duration:3.4s; animation-delay:1.2s; }
.s5{ left:11%; top:66%; font-size:22px; animation-duration:3.2s; animation-delay:1.6s; }
.s6{ left:87%; top:70%; font-size:28px; animation-duration:2.8s; animation-delay:.3s; }
.s7{ left:31%; top:78%; font-size:14px; animation-duration:3.8s; animation-delay:2.0s; }
.s8{ left:70%; top:74%; font-size:19px; animation-duration:3.0s; animation-delay:1.0s; }
.s9{ left:5%;  top:46%; font-size:24px; animation-duration:3.5s; animation-delay:1.9s; }
.s10{ left:95%; top:56%; font-size:16px; animation-duration:2.7s; animation-delay:.7s; }

@keyframes twinkle{
  0%,100%{ opacity:0; transform:scale(.3) rotate(-14deg); }
  40%{ opacity:1; transform:scale(1.2) rotate(8deg); }
  60%{ opacity:.5; transform:scale(.85) rotate(0deg); }
  80%{ opacity:.9; transform:scale(1) rotate(0deg); }
}

.eyebrow{
  position:relative; z-index:2;
  margin:0 0 18px;
  color:var(--violet);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.19em;
  text-transform:uppercase;
  opacity:0;
  animation:riseIn .7s .12s cubic-bezier(.16,1,.3,1) forwards;
}

.intro h1{
  position:relative; z-index:2;
  margin:0;
  font-family:"DM Serif Display", Georgia, serif;
  font-weight:400;
  font-size:clamp(3.1rem, 12vw, 8.2rem);
  line-height:.92;
  letter-spacing:-.05em;
}
.intro h1 .line{
  display:block;
  opacity:0;
  transform:translateY(26px);
  animation:riseIn .85s cubic-bezier(.16,1,.3,1) forwards;
}
.intro h1 .one{ animation-delay:.22s; }
.intro h1 .two{ color:var(--violet); animation-delay:.42s; }

.vine{
  position:relative; z-index:2;
  margin-top:16px;
  color:var(--orchid);
  letter-spacing:3px;
  font:1rem Georgia, serif;
  opacity:0;
  animation:fadeIn .5s 1.05s forwards;
}

.continue-btn{
  position:relative; z-index:2;
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin-top:clamp(38px, 7vh, 66px);
  border:0;
  border-radius:999px;
  padding:16px 24px 16px 28px;
  color:#ffffff;
  background:linear-gradient(135deg,#542170,#914cb6,#bc77d3);
  box-shadow:0 10px 0 #ead9f0, 0 19px 33px rgba(76,23,104,.25);
  font:800 .9rem Manrope, Arial, sans-serif;
  letter-spacing:.04em;
  cursor:pointer;
  opacity:0;
  transform:translateY(18px);
  animation:riseIn .7s .95s cubic-bezier(.16,1,.3,1) forwards;
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
}
.continue-btn::before{
  content:"";
  position:absolute;
  top:-100%; bottom:-100%; left:-40%;
  width:24%;
  background:rgba(255,255,255,.65);
  transform:skewX(-20deg);
  animation:glint 3.4s 1.9s ease-in-out infinite;
}
.continue-btn i{ font-size:1.3em; font-style:normal; }
.continue-btn:active{ transform:translateY(3px) scale(.97); }
.continue-btn:focus-visible{ outline:3px solid var(--gold); outline-offset:4px; }

@keyframes riseIn{ to{ opacity:1; transform:none; } }
@keyframes fadeIn{ to{ opacity:1; } }
@keyframes glint{ 0%,60%,100%{ left:-40%; } 78%{ left:120%; } }

/* ---------- SCENE ---------- */
.scene{
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
}
.scene-bg{
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 46%, #faf1fd 0%, #e9d1f2 52%, #d3ade3 100%);
}

.flower-field{ position:absolute; inset:0; overflow:hidden; }
.flower{
  position:absolute;
  width:clamp(58px, 14vw, 140px);
  height:clamp(76px, 18vw, 175px);
  opacity:0;
  transform:translate(-50%,-50%) scale(0) rotate(var(--r, 0deg));
  transform-origin:50% 70%;
}
.app.bloom .flower{
  animation:bloomIn .8s var(--delay, 0ms) cubic-bezier(.16,1,.3,1) forwards;
}
.flower .stem{ position:absolute; z-index:-1; left:50%; top:42%; width:7%; height:58%; border-radius:9px; background:var(--leaf); transform:translateX(-50%); }
.flower .leaf{ position:absolute; z-index:-1; width:36%; height:15%; border-radius:100% 0 100% 0; background:#3d6746; }
.flower .leaf.a{ left:43%; top:70%; transform:rotate(27deg); }
.flower .leaf.b{ right:43%; top:79%; transform:rotate(202deg); }
.flower .bloom-head{ position:absolute; left:50%; top:15%; width:60%; aspect-ratio:1; transform:translateX(-50%); }
.flower .petal{ position:absolute; left:50%; top:50%; width:44%; height:58%; border-radius:56% 56% 47% 47%; background:var(--c, #a85bc9); transform-origin:50% 100%; }
.flower .petal:nth-child(1){ transform:translate(-50%,-100%) rotate(0deg); }
.flower .petal:nth-child(2){ transform:translate(-50%,-100%) rotate(72deg); }
.flower .petal:nth-child(3){ transform:translate(-50%,-100%) rotate(144deg); }
.flower .petal:nth-child(4){ transform:translate(-50%,-100%) rotate(216deg); }
.flower .petal:nth-child(5){ transform:translate(-50%,-100%) rotate(288deg); }
.flower .centre{ position:absolute; left:50%; top:50%; width:29%; aspect-ratio:1; border-radius:50%; background:var(--gold); transform:translate(-50%,-50%); }

@keyframes bloomIn{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(0) rotate(var(--r,0deg)); }
  70%{ opacity:1; transform:translate(-50%,-50%) scale(1.1) rotate(var(--r,0deg)); }
  100%{ opacity:1; transform:translate(-50%,-50%) scale(1) rotate(var(--r,0deg)); }
}

.halo{
  position:absolute;
  left:50%; top:50%;
  width:min(94vw, 600px);
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle, #ffffff 0%, rgba(255,255,255,.6) 35%, transparent 70%);
  opacity:0;
  transform:translate(-50%,-50%) scale(.2);
}
.app.done .halo{ animation:haloOpen 1.15s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes haloOpen{ to{ opacity:1; transform:translate(-50%,-50%) scale(1); } }

.reveal{
  position:absolute;
  left:50%; top:50%;
  z-index:3;
  width:min(78vw, 430px);
  text-align:center;
  opacity:0;
  transform:translate(-50%,-44%) scale(.72);
}
.app.done .reveal{ animation:revealIn .85s .1s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes revealIn{ to{ opacity:1; transform:translate(-50%,-50%) scale(1); } }

.dog-btn{
  position:relative;
  width:100%;
  border:0;
  padding:12px;
  background:transparent;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.dog-btn .frame{
  position:relative;
  display:block;
  overflow:hidden;
  width:100%;
  aspect-ratio:1;
  border:9px solid rgba(255,255,255,.95);
  border-radius:49% 51% 47% 53% / 49% 45% 55% 51%;
  box-shadow:0 22px 50px rgba(56,17,73,.3);
  transform:rotate(-2deg);
  animation:floatSlow 4s 1s ease-in-out infinite;
}
.dog-btn img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center; transform:scale(1.05); }
.dog-btn .ring{ position:absolute; z-index:-1; border:2px solid var(--gold); border-radius:50%; }
.dog-btn .ring-a{ inset:2px -4px -3px 2px; transform:rotate(8deg); }
.dog-btn .ring-b{ inset:-5px 5px 5px -5px; border-color:var(--violet); transform:rotate(-9deg); }
@keyframes floatSlow{ 50%{ transform:rotate(-.7deg) translateY(-7px); } }

.note{
  position:relative;
  max-width:min(90vw, 460px);
  margin:14px auto 0;
  padding:16px 22px 14px;
  background:var(--paper);
  border:1px solid #ffffff;
  border-radius:6px 12px 8px 10px / 11px 6px 13px 7px;
  box-shadow:0 9px 0 rgba(97,42,116,.1), 0 18px 28px rgba(69,22,90,.2);
  transform:rotate(-1deg);
}
.note::before{ content:""; position:absolute; inset:6px; border:1px dashed rgba(167,91,201,.3); border-radius:inherit; pointer-events:none; }
.note .tape{ position:absolute; top:-7px; left:13%; width:74%; height:12px; background:rgba(239,202,91,.55); }
.note .deco{ position:absolute; font:1.1rem Georgia, serif; color:var(--orchid); }
.note .deco.left{ left:8px; bottom:8px; transform:rotate(-16deg); }
.note .deco.right{ right:9px; bottom:9px; color:var(--gold); transform:rotate(14deg); }

.rooting{
  position:relative; z-index:1;
  margin:0;
  color:#3a104a;
  font:italic clamp(1.75rem, 7vw, 2.55rem) "DM Serif Display", Georgia, serif;
  letter-spacing:-.03em;
}
.rooting b{ color:var(--orchid); font-style:normal; }
.tap-hint{
  position:relative; z-index:1;
  margin:7px 0 0;
  color:#63326f;
  font-size:.63rem;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.message{
  position:relative; z-index:1;
  min-height:1.5em;
  margin:10px 0 0;
  padding-top:9px;
  border-top:1px solid rgba(167,91,201,.25);
  color:#4a165c;
  font:italic clamp(1.1rem, 4.6vw, 1.4rem) "DM Serif Display", Georgia, serif;
}
.message.exit{ animation:msgOut .22s ease forwards; }
@keyframes msgOut{ to{ opacity:0; transform:translateY(6px); filter:blur(2px); } }

.message .word{
  display:inline-block;
  opacity:0;
  background:linear-gradient(105deg,#4a165c 0%,#4a165c 35%,#d79a27 48%,#fff4c4 53%,#4a165c 61%,#4a165c 100%);
  background-size:230% 100%;
  background-clip:text;
  -webkit-background-clip:text;
  color:transparent;
  animation:wordIn .5s var(--wd, 0ms) cubic-bezier(.16,1,.3,1) forwards,
            wordShine 1.1s calc(var(--wd, 0ms) + .28s) ease-out forwards;
}
@keyframes wordIn{ 0%{ opacity:0; transform:translateY(14px); } 100%{ opacity:1; transform:none; } }
@keyframes wordShine{ from{ background-position:180% 0; } to{ background-position:-40% 0; } }

.burst-layer{ position:absolute; inset:0; z-index:6; pointer-events:none; }
.burst{
  position:absolute;
  left:var(--x); top:var(--y);
  color:var(--color, #a85bc9);
  font:var(--size, 16px) Georgia, serif;
  opacity:0;
  animation:burstFly 1.05s ease-out forwards;
}
@keyframes burstFly{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(.2); }
  16%{ opacity:1; }
  100%{ opacity:0; transform:translate(calc(-50% + var(--dx,0px)), calc(-50% + var(--dy,0px))) rotate(var(--spin,0deg)) scale(1.3); }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .spark, .eyebrow, .intro h1 .line, .vine, .continue-btn{ opacity:1 !important; transform:none !important; }
  .app.go .intro{ display:none; }
  .app.bloom .flower{ opacity:1; transform:translate(-50%,-50%) scale(1) rotate(var(--r,0deg)); }
  .app.done .halo{ opacity:1; transform:translate(-50%,-50%) scale(1); }
  .app.done .reveal{ opacity:1; transform:translate(-50%,-50%) scale(1); }
  .message .word{ opacity:1; color:#4a165c; background:none; -webkit-text-fill-color:#4a165c; }
}