/* ============================================================
   ONBOARDING FLOW
   ============================================================ */
.onboarding{
  position:fixed; inset:0; z-index:500;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  background:
    url("../images/background/onboarding-bg.png") center center / cover no-repeat;
  overflow-y:auto;
  isolation:isolate;
}
.onboarding.hidden{display:none}
.onboarding::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  background:
    radial-gradient(circle at 50% 55%, rgba(255,250,236,.55) 0%, rgba(255,250,236,.2) 38%, rgba(255,250,236,0) 70%),
    linear-gradient(180deg, rgba(233,246,255,.28) 0%, rgba(255,248,236,.22) 48%, rgba(244,255,230,.26) 100%);
  pointer-events:none;
}

/* Scene SVG layer */
.scene-bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index:0;
}
.scene-bg svg{
  width:100%; height:100%;
  display:block;
}

/* Sun glow */
.sun{
  position:absolute; top:6%; right:8%;
  width:90px; height:90px; border-radius:50%;
  background:radial-gradient(circle, #FFE066 0%, #FFC93C 60%, transparent 80%);
  z-index:1;
  animation:sunPulse 4s ease-in-out infinite;
}
@keyframes sunPulse{
  0%,100%{transform:scale(1); opacity:.85}
  50%{transform:scale(1.08); opacity:1}
}

/* Clouds */
.cloud{
  position:fixed;
  z-index:1;
  pointer-events:none;
  transform-style:preserve-3d;
  perspective:900px;
  will-change:transform;
}
.cloud svg{display:block}
.cloud.c1{top:7%; left:-24%; animation:drift1 34s cubic-bezier(.45,.05,.55,.95) infinite}
.cloud.c2{top:18%; left:-28%; animation:drift2 46s cubic-bezier(.4,.1,.6,.9) infinite; animation-delay:-11s}
.cloud.c3{top:2%; left:-22%; animation:drift3 39s cubic-bezier(.44,.08,.56,.92) infinite; animation-delay:-19s}
@keyframes drift1{
  0%{transform:translate3d(0, 0, 0) rotateX(7deg) rotateY(-10deg) rotateZ(-2deg) scale(.96)}
  22%{transform:translate3d(27vw, -2.2vh, 34px) rotateX(4deg) rotateY(8deg) rotateZ(2deg) scale(1.03)}
  48%{transform:translate3d(58vw, 1.4vh, 18px) rotateX(9deg) rotateY(-5deg) rotateZ(-1deg) scale(.99)}
  74%{transform:translate3d(91vw, -1.8vh, 42px) rotateX(3deg) rotateY(11deg) rotateZ(2.5deg) scale(1.04)}
  100%{transform:translate3d(128vw, .8vh, 0) rotateX(7deg) rotateY(-10deg) rotateZ(-2deg) scale(.96)}
}
@keyframes drift2{
  0%{transform:translate3d(0, 1vh, 12px) rotateX(-4deg) rotateY(9deg) rotateZ(3deg) scale(.88)}
  18%{transform:translate3d(20vw, 4vh, 38px) rotateX(6deg) rotateY(-7deg) rotateZ(-2deg) scale(.95)}
  43%{transform:translate3d(51vw, -3vh, 22px) rotateX(-7deg) rotateY(12deg) rotateZ(1deg) scale(.9)}
  69%{transform:translate3d(82vw, 2.5vh, 48px) rotateX(5deg) rotateY(-10deg) rotateZ(-3deg) scale(.97)}
  100%{transform:translate3d(134vw, -1vh, 12px) rotateX(-4deg) rotateY(9deg) rotateZ(3deg) scale(.88)}
}
@keyframes drift3{
  0%{transform:translate3d(0, -1vh, 28px) rotateX(10deg) rotateY(4deg) rotateZ(-4deg) scale(.76)}
  20%{transform:translate3d(18vw, -5vh, 52px) rotateX(2deg) rotateY(-12deg) rotateZ(1deg) scale(.83)}
  45%{transform:translate3d(47vw, .8vh, 20px) rotateX(12deg) rotateY(8deg) rotateZ(3deg) scale(.78)}
  70%{transform:translate3d(78vw, -3.8vh, 58px) rotateX(4deg) rotateY(-7deg) rotateZ(-2deg) scale(.84)}
  100%{transform:translate3d(126vw, .6vh, 28px) rotateX(10deg) rotateY(4deg) rotateZ(-4deg) scale(.76)}
}

/* Trees */
.tree{
  position:absolute; bottom:0;
  z-index:2; pointer-events:none;
  transform-origin:bottom center;
  animation:sway 5s ease-in-out infinite;
}
.tree.t1{left:-2%; width:160px; animation-delay:0s}
.tree.t2{right:-2%; width:140px; animation-delay:-2.5s}
.tree.t3{left:15%; width:90px; bottom:-10px; opacity:.8; animation-delay:-1s}
.tree.t4{right:18%; width:80px; bottom:-15px; opacity:.75; animation-delay:-3s}
@keyframes sway{
  0%,100%{transform:rotate(-1deg)}
  50%{transform:rotate(1.5deg)}
}

/* Grass at bottom */
.grass{
  position:fixed; bottom:0; left:0; right:0;
  height:80px;
  background:linear-gradient(180deg, transparent, #B8D870 60%, #94B85A);
  z-index:1;
  opacity:.25;
}
.grass::before{
  content:''; position:absolute; bottom:60px; left:0; right:0;
  height:30px;
  background:radial-gradient(ellipse 40px 20px at 10% 100%, #94B85A 30%, transparent 32%),
             radial-gradient(ellipse 50px 25px at 25% 100%, #94B85A 30%, transparent 32%),
             radial-gradient(ellipse 35px 18px at 45% 100%, #94B85A 30%, transparent 32%),
             radial-gradient(ellipse 45px 22px at 65% 100%, #94B85A 30%, transparent 32%),
             radial-gradient(ellipse 40px 20px at 85% 100%, #94B85A 30%, transparent 32%);
}

/* Flowers on the ground */
.flower{
  position:absolute; bottom:30px;
  z-index:3;
  animation:flowerSway 3s ease-in-out infinite;
  transform-origin:bottom center;
}
.flower.f1{left:8%; animation-delay:0s}
.flower.f2{left:22%; bottom:25px; animation-delay:-1s}
.flower.f3{right:12%; animation-delay:-1.5s}
.flower.f4{right:25%; bottom:20px; animation-delay:-0.5s}
.flower.f5{left:35%; bottom:15px; animation-delay:-2s}
@keyframes flowerSway{
  0%,100%{transform:rotate(-3deg)}
  50%{transform:rotate(3deg)}
}

/* Butterflies flying along curved paths */
.butterfly{
  position:fixed;
  z-index:4;
  pointer-events:none;
  width:72px; height:72px;
}
.butterfly img{
  width:100%; height:100%;
  object-fit:contain;
  animation:flap .25s ease-in-out infinite alternate;
  filter: drop-shadow(0 6px 8px rgba(50,45,70,.18));
}
@keyframes flap{
  from{transform:scaleX(1)}
  to{transform:scaleX(0.5)}
}
.butterfly.b1{
  top:20%; left:0%;
  animation:fly1 18s ease-in-out infinite;
}
.butterfly.b2{
  top:55%; left:0%;
  animation:fly2 22s ease-in-out infinite;
  animation-delay:-5s;
}
.butterfly.b3{
  top:35%; left:0%;
  animation:fly3 25s ease-in-out infinite;
  animation-delay:-12s;
}
.butterfly.b4{
  top:30%; left:-8%;
  width:88px; height:88px;
  animation:fly4 19s cubic-bezier(.46,.06,.54,.94) infinite;
  animation-delay:-3s;
}
.butterfly.b5{
  top:42%; left:-12%;
  width:76px; height:76px;
  animation:fly5 23s cubic-bezier(.42,.08,.58,.92) infinite;
  animation-delay:-11s;
}
@keyframes fly1{
  0%{transform:translate(0, 0) rotate(0)}
  20%{transform:translate(25vw, -8vh) rotate(15deg)}
  40%{transform:translate(50vw, 5vh) rotate(-10deg)}
  60%{transform:translate(70vw, -5vh) rotate(15deg)}
  80%{transform:translate(90vw, 8vh) rotate(-15deg)}
  100%{transform:translate(110vw, 0) rotate(0)}
}
@keyframes fly2{
  0%{transform:translate(0, 0) rotate(0)}
  25%{transform:translate(30vw, -12vh) rotate(-15deg)}
  50%{transform:translate(55vw, 8vh) rotate(20deg)}
  75%{transform:translate(80vw, -8vh) rotate(-10deg)}
  100%{transform:translate(110vw, 0) rotate(0)}
}
@keyframes fly3{
  0%{transform:translate(0, 0) rotate(10deg)}
  33%{transform:translate(35vw, 10vh) rotate(-10deg)}
  66%{transform:translate(70vw, -10vh) rotate(15deg)}
  100%{transform:translate(110vw, 0) rotate(10deg)}
}
@keyframes fly4{
  0%{transform:translate3d(0, 1vh, 0) rotate(-6deg) scale(.9)}
  16%{transform:translate3d(18vw, -4vh, 0) rotate(10deg) scale(1)}
  33%{transform:translate3d(34vw, 3vh, 0) rotate(-12deg) scale(.94)}
  52%{transform:translate3d(53vw, -6vh, 0) rotate(8deg) scale(1.04)}
  72%{transform:translate3d(77vw, 5vh, 0) rotate(-10deg) scale(.96)}
  88%{transform:translate3d(97vw, -3vh, 0) rotate(12deg) scale(1.02)}
  100%{transform:translate3d(116vw, 2vh, 0) rotate(-4deg) scale(.92)}
}
@keyframes fly5{
  0%{transform:translate3d(0, 0, 0) rotate(8deg) scale(.88)}
  18%{transform:translate3d(14vw, 4vh, 0) rotate(-8deg) scale(1)}
  36%{transform:translate3d(31vw, -5vh, 0) rotate(11deg) scale(.95)}
  57%{transform:translate3d(57vw, 2vh, 0) rotate(-9deg) scale(1.03)}
  78%{transform:translate3d(82vw, -6vh, 0) rotate(13deg) scale(.97)}
  100%{transform:translate3d(114vw, 1vh, 0) rotate(-6deg) scale(.9)}
}

/* Bird flying across */
.bird{
  position:absolute;
  top:25%; left:-50px;
  z-index:3;
  width:32px; height:24px;
  animation:birdFly 30s linear infinite;
  animation-delay:-8s;
}
.bird svg{
  width:100%; height:100%;
  animation:wingFlap .3s ease-in-out infinite alternate;
}
@keyframes wingFlap{
  from{transform:scaleY(1)}
  to{transform:scaleY(0.7)}
}
@keyframes birdFly{
  0%{transform:translateX(0) translateY(0)}
  50%{transform:translateX(50vw) translateY(-30px)}
  100%{transform:translateX(110vw) translateY(0)}
}

/* Small ground animals */
.ground-animal{
  position:absolute; bottom:35px;
  z-index:3; pointer-events:none;
}
.ground-animal.a1{left:30%; width:50px}
.ground-animal.a2{right:30%; width:45px}

.ob-step{
  display:none;
  width:100%; max-width:440px;
  text-align:center;
  animation:slideIn .5s cubic-bezier(.34,1.56,.64,1);
  position:relative; z-index:10;
}
.ob-step.active{display:block}
@keyframes slideIn{
  from{opacity:0; transform:translateY(20px) scale(.95)}
  to{opacity:1; transform:none}
}

/* Splash */
.splash-logo{
  font-size:120px; line-height:1;
  display:inline-block;
  animation:bigBounce 2s ease-in-out infinite;
  filter:drop-shadow(0 8px 0 rgba(0,0,0,0.1));
}
.splash-logo-img{
  width:200px; height:200px;
  border-radius:50%;
  object-fit:cover;
  display:inline-block;
  border:6px solid var(--paper);
  box-shadow:
    0 8px 0 var(--line),
    0 16px 32px rgba(59,42,31,0.18);
  animation:bigBounce 3s ease-in-out infinite;
}
@keyframes bigBounce{
  0%,100%{transform:translateY(0) rotate(-3deg)}
  50%{transform:translateY(-12px) rotate(3deg)}
}
.splash-title{
  font-family:'Fredoka',sans-serif;
  font-size:46px; font-weight:700;
  margin-top:20px;
  background:linear-gradient(135deg, var(--berry), var(--honey));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  letter-spacing:-0.02em;
}
.splash-tag{
  font-size:14px; color:var(--ink-soft);
  font-weight:700; margin-top:6px;
  letter-spacing:0.15em; text-transform:uppercase;
}
.splash-quote{
  font-size:15px; color:var(--ink-soft);
  font-weight:600; margin:30px auto;
  max-width:280px; line-height:1.6;
  font-style:italic;
}
.splash-quote::before, .splash-quote::after{
  content:'"'; color:var(--honey); font-size:24px; font-family:serif;
}

.ob-title{
  font-family:'Fredoka',sans-serif;
  font-size:30px; font-weight:600;
  margin-bottom:8px;
}
.ob-subtitle{
  font-size:14px; color:var(--ink-soft);
  font-weight:600; margin-bottom:30px;
  line-height:1.5;
}

/* Role cards */
.role-cards{
  display:flex; flex-direction:column; gap:14px;
  margin-bottom:20px;
}
.role-card{
  background:var(--paper);
  border:3px solid var(--line);
  border-radius:24px;
  padding:24px;
  display:flex; align-items:center; gap:18px;
  text-align:left;
  box-shadow: var(--shadow);
  transition:all .2s;
  cursor:pointer;
  width:100%;
}
.role-card:hover{
  transform:translateY(-3px);
  border-color:var(--honey);
  box-shadow: 0 6px 0 var(--line), 0 12px 24px rgba(59,42,31,0.12);
}
.role-card-icon{
  width:64px; height:64px; border-radius:18px;
  display:grid; place-items:center;
  font-size:36px; flex-shrink:0;
  border:2px solid var(--line);
}
.role-card-icon.parent{background:#FFF1D6}
.role-card-icon.child{background:#E5F3E5}
.role-card-text h3{
  font-size:20px; margin-bottom:2px;
}
.role-card-text p{
  font-size:13px; color:var(--ink-soft); font-weight:600;
}

/* Family name input */
.big-input{
  width:100%;
  padding:18px 20px;
  border-radius:18px;
  border:3px solid var(--line);
  background:var(--paper);
  font-family:'Fredoka',sans-serif;
  font-size:22px; font-weight:600;
  color:var(--ink);
  text-align:center;
  box-shadow:var(--shadow-sm);
  transition:border-color .2s;
}
.big-input:focus{
  outline:none; border-color:var(--honey);
}
.big-input::placeholder{color:#C9B89A}

/* Pet selection */
.pet-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:12px; margin-bottom:20px;
  align-items:stretch;
}
.pet-opt{
  background:var(--paper);
  border:3px solid var(--line);
  border-radius:20px;
  padding:18px 8px;
  text-align:center;
  cursor:pointer;
  box-shadow:var(--shadow-sm);
  transition:all .2s;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
}
.pet-opt:hover{transform:translateY(-2px)}
.pet-opt.selected{
  border-color:var(--honey);
  background:#FFF1D6;
  box-shadow:0 4px 0 var(--honey);
  transform:translateY(-2px);
}
.pet-opt-icon{
  font-size:42px; line-height:1;
  display:block;
  animation:bob 3s ease-in-out infinite;
}
.pet-opt-name{
  font-size:14px; font-weight:800;
  color:var(--ink-soft);
  margin-top:6px;
  letter-spacing:0.05em;
}
.pet-opt-photo{
  overflow:hidden;
}
.pet-opt-thumb{
  width:100%;
  max-width:120px;
  height:86px;
  object-fit:contain;
  object-position:center center;
  display:block;
  margin:0 auto;
  background:transparent;
  box-shadow:none;
  filter:drop-shadow(0 8px 12px rgba(59,42,31,.14));
  transform-origin:center center;
  animation:petThumbBob 3s ease-in-out infinite;
}
.pet-opt:nth-child(1){--pet-x:0px; --pet-y:-4px; --pet-scale:1.1}
.pet-opt:nth-child(2){--pet-x:8px; --pet-y:6px}
.pet-opt:nth-child(3){--pet-x:0px; --pet-y:-3px}
.pet-opt:nth-child(4){--pet-x:0px; --pet-y:-5px}
.pet-opt:nth-child(5){--pet-x:0px; --pet-y:-3px; --pet-scale:.9}
.pet-opt:nth-child(6){--pet-x:1px; --pet-y:5px}
.pet-opt:nth-child(7){--pet-x:-2px; --pet-y:2px}
.pet-opt:nth-child(8){--pet-x:3px; --pet-y:5px}
.pet-opt:nth-child(9){--pet-x:-3px; --pet-y:4px}
@keyframes petThumbBob{
  0%,100%{transform:translate(var(--pet-x, 0px), var(--pet-y, 0px)) scale(var(--pet-scale, 1)) rotate(-2deg)}
  50%{transform:translate(var(--pet-x, 0px), calc(var(--pet-y, 0px) - 8px)) scale(var(--pet-scale, 1)) rotate(2deg)}
}

/* 寵物選擇 modal 佈局（child.html 用） */
.pet-setup-modal{
  max-width:420px;
  padding:28px 22px 26px;
  text-align:center;
}
.pet-setup-modal .modal-icon{
  font-size:56px;
  margin-bottom:4px;
}
.pet-setup-modal .ob-title{
  font-size:22px;
  margin-bottom:4px;
}
.pet-setup-modal .ob-subtitle{
  font-size:13px;
  margin-bottom:18px;
}
.pet-setup-modal .pet-grid{
  gap:10px;
  margin-bottom:18px;
}
.pet-setup-modal .pet-opt{
  padding:12px 6px 10px;
  border-radius:18px;
}
.pet-setup-modal .pet-opt-thumb{
  max-width:100px;
  height:72px;
}
.pet-setup-modal .pet-opt-name{
  font-size:13px;
  margin-top:4px;
}
.pet-setup-name-label{
  font-size:13px; font-weight:700;
  color:var(--ink-soft);
  margin-bottom:8px;
}
.pet-setup-name-input{
  font-size:18px;
  padding:14px 18px;
  margin-bottom:16px;
}
.pet-gender-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin-bottom:16px;
}
.pet-gender-opt{
  border:3px solid var(--line);
  border-radius:16px;
  background:var(--paper);
  color:var(--ink);
  font-family:'Fredoka',sans-serif;
  font-size:16px;
  font-weight:700;
  padding:12px 10px;
  cursor:pointer;
  box-shadow:var(--shadow-sm);
  transition:transform .2s, border-color .2s, background .2s, box-shadow .2s;
}
.pet-gender-opt:hover{
  transform:translateY(-2px);
}
.pet-gender-opt.selected{
  border-color:var(--honey);
  background:#FFF1D6;
  box-shadow:0 4px 0 var(--honey);
}

/* Hatching ceremony */
.hatch-stage{
  height:280px;
  display:flex; align-items:center; justify-content:center;
  position:relative;
  margin-bottom:20px;
}
.egg{
  font-size:140px;
  line-height:1;
  display:inline-block;
  animation:eggShake 0.5s ease-in-out infinite;
  filter:drop-shadow(0 10px 0 rgba(0,0,0,0.1));
}
@keyframes eggShake{
  0%,100%{transform:rotate(-5deg)}
  50%{transform:rotate(5deg)}
}
.hatch-pet{
  display:none;
  animation:hatchOut 1s cubic-bezier(.34,1.8,.64,1);
  filter:drop-shadow(0 16px 24px rgba(59,42,31,0.16));
}
.hatch-pet-image{
  width:220px;
  height:220px;
  object-fit:contain;
  display:block;
}
@keyframes hatchOut{
  0%{transform:scale(0) rotate(-180deg); opacity:0}
  50%{transform:scale(1.3) rotate(20deg)}
  100%{transform:scale(1) rotate(0); opacity:1}
}
.hatch-pet.show{display:inline-block; animation:hatchOut 1s cubic-bezier(.34,1.8,.64,1), bob 3s ease-in-out infinite 1s}
.sparkle{
  position:absolute; font-size:24px;
  animation:sparkle 1.5s ease-out infinite;
  opacity:0;
}
.sparkle.s1{top:30%; left:25%; animation-delay:0s}
.sparkle.s2{top:20%; right:28%; animation-delay:0.4s}
.sparkle.s3{bottom:30%; left:30%; animation-delay:0.8s}
.sparkle.s4{bottom:25%; right:25%; animation-delay:1.2s; font-size:20px}
@keyframes sparkle{
  0%{opacity:0; transform:scale(0) rotate(0)}
  50%{opacity:1; transform:scale(1.2) rotate(180deg)}
  100%{opacity:0; transform:scale(0.8) rotate(360deg)}
}

.welcome-card{
  background:var(--paper);
  border:3px dashed var(--honey);
  border-radius:20px;
  padding:18px;
  margin-bottom:20px;
}
.welcome-card .label{
  font-size:11px; font-weight:800; color:var(--ink-soft);
  text-transform:uppercase; letter-spacing:0.08em;
}
.welcome-card .value{
  font-family:'Fredoka',sans-serif;
  font-size:22px; font-weight:600;
  margin-top:4px;
}

/* Big primary button */
.big-btn{
  width:100%;
  padding:18px;
  border-radius:18px;
  background:var(--ink);
  color:var(--cream);
  font-family:'Fredoka',sans-serif;
  font-size:18px; font-weight:600;
  box-shadow:0 6px 0 #1f1108;
  transition:transform .15s, box-shadow .15s;
  letter-spacing:0.02em;
}
.big-btn:hover{transform:translateY(-2px); box-shadow:0 8px 0 #1f1108}
.big-btn:active{transform:translateY(3px); box-shadow:0 3px 0 #1f1108}
.big-btn:disabled{
  background:#C9B89A; box-shadow:0 4px 0 #A89678;
  cursor:not-allowed;
}
.big-btn.honey{
  background:var(--honey); color:var(--ink);
  box-shadow:0 6px 0 #C99419;
}
.big-btn.honey:hover{box-shadow:0 8px 0 #C99419}
.big-btn.honey:active{box-shadow:0 3px 0 #C99419}

.ob-back{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:700; color:var(--ink-soft);
  margin-top:14px; padding:8px 14px;
  border-radius:12px;
}
.ob-back:hover{color:var(--ink)}

/* Step indicator */
.steps-dots{
  display:flex; gap:8px; justify-content:center;
  margin-bottom:24px;
}
.steps-dots .dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--line);
  transition:all .3s;
}
.steps-dots .dot.active{
  background:var(--honey); width:24px; border-radius:6px;
}
.steps-dots .dot.done{
  background:var(--leaf);
}

/* Portal / Splash pages */
.portal-wrap{max-width:920px;margin:48px auto;padding:0 18px}
.portal-card{background:var(--paper);border:2px solid var(--line);border-radius:22px;padding:22px;box-shadow:var(--shadow)}
.portal-title{font-size:42px;margin-bottom:8px}
.portal-sub{color:var(--ink-soft);margin-bottom:18px}
.portal-actions{display:flex;gap:10px;flex-wrap:wrap}
.portal-actions a{text-decoration:none}
.page-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.page-links a{font-size:13px;color:var(--ink-soft);text-decoration:none;font-weight:700}
.page-links a:hover{color:var(--berry)}
.splash-logo-photo{
  position:relative;
  overflow:visible;
  transform-style:preserve-3d;
  perspective:1200px;
  animation:float3d 4.8s ease-in-out infinite;
}
.splash-animal-img{
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:contain;
  display:block;
  border:6px solid rgba(255,255,255,.9);
  box-shadow:
    0 14px 20px rgba(59,42,31,.22),
    0 28px 45px rgba(59,42,31,.2),
    inset 0 2px 8px rgba(255,255,255,.7);
  transform:rotateX(10deg) rotateY(-9deg) translateZ(24px);
}
.splash-logo-photo::before{
  content:"";
  position:absolute;
  inset:-12px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 20%, rgba(255,255,255,.8), rgba(255,255,255,0) 60%);
  transform:translateZ(8px);
  pointer-events:none;
}
.splash-logo-photo::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-24px;
  width:72%;
  height:18px;
  background:radial-gradient(ellipse at center, rgba(59,42,31,.32), rgba(59,42,31,0) 70%);
  transform:translateX(-50%) rotateX(75deg);
  filter:blur(2px);
  pointer-events:none;
}
@keyframes float3d{
  0%,100%{transform:translateY(0) rotateZ(-.5deg)}
  50%{transform:translateY(-10px) rotateZ(.7deg)}
}
.splash-subline{
  margin-top:8px;
  letter-spacing:.35em;
  font-size:22px;
  color:var(--ink-soft);
}
.splash-quote{
  margin:22px 0 18px;
  color:#7A6A5F;
  font-weight:700;
  line-height:1.9;
  font-style:italic;
  max-width:none;
  white-space:nowrap;
  font-size:24px;
  width:max-content;
  position:relative;
  left:50%;
  transform:translateX(-50%);
  text-align:center;
}
.splash-quote::before,
.splash-quote::after{
  content:none;
}
.ob-step#step-splash .big-btn.honey{
  font-size:32px;
  font-weight:700;
}
.butterfly{
  display:grid;
  place-items:center;
}
.butterfly-img{
  width:100%;
  height:100%;
  display:block;
}
.butterfly-img-alt{
  filter: drop-shadow(0 8px 10px rgba(49,46,78,.18));
}
.cloud{
  width:300px;
}
.cloud.c2{
  width:250px;
}
.cloud.c3{
  width:210px;
}
.cloud-img{
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;
  transform:translateZ(24px);
  filter:
    drop-shadow(0 12px 12px rgba(40,55,70,.16))
    drop-shadow(0 28px 28px rgba(70,85,100,.12));
  animation:cloudPuff 5.8s ease-in-out infinite;
}
.cloud.c2 .cloud-img{
  animation-duration:7.2s;
  animation-delay:-2s;
}
.cloud.c3 .cloud-img{
  animation-duration:6.4s;
  animation-delay:-4s;
}
@keyframes cloudPuff{
  0%,100%{transform:translateZ(24px) rotateX(0deg) scale(1)}
  50%{transform:translateZ(42px) rotateX(3deg) scale(1.035)}
}
.sun{
  width:300px;
  height:300px;
  background:none;
  border-radius:0;
  top:2.5%;
  right:3.5%;
  animation:sunFloat 6s ease-in-out infinite;
  filter:none;
}
.sun-img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  border-radius:50%;
  transform:translateZ(0);
  filter:
    drop-shadow(0 8px 12px rgba(202,150,44,.2))
    drop-shadow(0 0 22px rgba(255,220,110,.28));
}
.sun::before{
  content:"";
  position:absolute;
  inset:-34px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,231,156,.42) 0%, rgba(255,231,156,.18) 40%, rgba(255,231,156,0) 74%);
  z-index:-1;
}
.sun::after{
  content:none;
}
@keyframes sunFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-5px)}
}