/* ===== Animated hero ===== */
.hero2 {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: min(88vh, 820px); display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 72px 16px 150px; text-align: center;
  background: radial-gradient(120% 90% at 50% 0%, #e6fbf8 0%, #f4fbf7 45%, #fdf6ea 100%);
}

/* soft sun glow */
.hero2 .glow { position: absolute; z-index: -2; width: 70vmin; height: 70vmin; left: 50%; top: 42%; transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(45,191,178,.18) 0%, rgba(45,191,178,0) 65%); animation: glow 7s ease-in-out infinite; }
@keyframes glow { 50% { transform: translate(-50%,-50%) scale(1.12); opacity: .75; } }

/* clouds */
.cloud { position: absolute; z-index: -1; height: 46px; border-radius: 999px; background: #fff; opacity: .9;
  box-shadow: 0 6px 18px rgba(28,138,129,.06); animation: drift linear infinite; }
.cloud::before, .cloud::after { content: ""; position: absolute; background: #fff; border-radius: 50%; }
.cloud::before { width: 54%; height: 150%; left: 14%; bottom: 30%; }
.cloud::after { width: 38%; height: 120%; right: 14%; bottom: 35%; }
.cloud.c1 { width: 170px; top: 13%; animation-duration: 70s; animation-delay: -12s; }
.cloud.c2 { width: 120px; top: 30%; animation-duration: 55s; animation-delay: -40s; transform: scale(.8); opacity: .75; }
.cloud.c3 { width: 210px; top: 8%;  animation-duration: 90s; animation-delay: -65s; }
.cloud.c4 { width: 140px; top: 55%; animation-duration: 80s; animation-delay: -25s; opacity: .6; }
@keyframes drift { from { left: -260px; } to { left: calc(100% + 60px); } }

/* floating puzzle pieces */
.bits { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.bit { position: absolute; width: var(--s, 34px); height: var(--s, 34px); border-radius: 30%;
  background: var(--c); box-shadow: inset 0 -5px 0 rgba(0,0,0,.08), inset 4px 5px 0 rgba(255,255,255,.45);
  opacity: 0; animation: pop-in .7s cubic-bezier(.34,1.56,.64,1) forwards, bob var(--d, 6s) ease-in-out infinite;
  animation-delay: var(--in, 1.6s), calc(var(--in, 1.6s) + .7s); translate: var(--px, 0) var(--py, 0); transition: translate .6s ease-out; }
.bit.round { border-radius: 50%; }
.bit.star { border-radius: 0; background: none; box-shadow: none; }
.bit.star::before { content: "★"; position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--s) * 1.2); color: var(--c);
  text-shadow: 0 3px 0 rgba(0,0,0,.06); line-height: 1; }
@keyframes pop-in { from { opacity: 0; transform: scale(0) rotate(-40deg); } to { opacity: 1; transform: scale(1) rotate(var(--r, 0deg)); } }
@keyframes bob {
  0%,100% { transform: translateY(0) rotate(var(--r, 0deg)); opacity: 1; }
  50% { transform: translateY(-16px) rotate(calc(var(--r, 0deg) + 14deg)); opacity: 1; }
}

/* logo assembly */
.brand { margin: 0; position: relative; width: min(560px, 86vw); aspect-ratio: 1301 / 732; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.brand img { position: absolute; display: block; user-select: none; -webkit-user-drag: none; }
.p-d1{left:0%;top:48.224%;width:16.603%}
.p-a1{left:16.603%;top:48.224%;width:15.603%}
.p-m1{left:32.206%;top:48.224%;width:17.371%}
.p-d2{left:49.577%;top:48.224%;width:16.526%}
.p-a2{left:66.103%;top:48.224%;width:16.295%}
.p-m2{left:82.398%;top:48.224%;width:17.602%}
.p-mascot{left:35.742%;top:0%;width:28.440%}
.p-studio{left:22.905%;top:89.617%;width:53.805%}

/* mascot: drop in with squash & stretch, then breathe */
.p-mascot { transform-origin: 50% 100%; opacity: 0; animation: drop 1.1s .15s cubic-bezier(.3,0,.4,1) forwards, breathe 3.2s 1.4s ease-in-out infinite; }
@keyframes drop {
  0%   { opacity: 0; transform: translateY(-140%) scale(.9, 1.15); }
  45%  { opacity: 1; transform: translateY(0) scale(1.18, .78); }
  62%  { transform: translateY(-14%) scale(.94, 1.08); }
  78%  { transform: translateY(0) scale(1.06, .93); }
  90%  { transform: scale(.98, 1.02); }
  100% { opacity: 1; transform: none; }
}
@keyframes breathe { 0%,100% { transform: scale(1,1); } 50% { transform: scale(1.04,.955); } }
.brand.boing .p-mascot { animation: boing .8s cubic-bezier(.3,0,.4,1), breathe 3.2s .8s ease-in-out infinite; opacity: 1; }
@keyframes boing {
  0% { transform: scale(1,1); } 15% { transform: scale(1.22,.74); } 40% { transform: translateY(-34%) scale(.88,1.14); }
  65% { transform: translateY(0) scale(1.12,.86); } 82% { transform: scale(.97,1.03); } 100% { transform: none; }
}

/* letters pop up one by one, then wave now and then */
.letter { transform-origin: 50% 100%; opacity: 0; animation: rise .65s cubic-bezier(.34,1.56,.64,1) forwards, wave 7s ease-in-out infinite;
  animation-delay: calc(.75s + var(--i) * .09s), calc(3s + var(--i) * .08s); }
@keyframes rise { from { opacity: 0; transform: translateY(40%) scale(.6); } to { opacity: 1; transform: none; } }
@keyframes wave { 0%, 8%, 100% { transform: none; } 3% { transform: translateY(-9%) rotate(-3deg); } 5.5% { transform: translateY(1%) scale(1.03,.97); } }
.brand.boing .letter { animation: rise .01s forwards, hop .55s cubic-bezier(.34,1.56,.64,1); animation-delay: 0s, calc(.12s + var(--i) * .05s); }
@keyframes hop { 40% { transform: translateY(-14%) rotate(-2deg); } }

.p-studio { opacity: 0; animation: fade-up .8s 1.55s ease-out forwards; }
@keyframes fade-up { from { opacity: 0; transform: translateY(30%); letter-spacing: 0; } to { opacity: 1; transform: none; } }

.hero2 .tagline { font-size: 20px; color: var(--muted); max-width: 620px; margin: 30px auto 0; opacity: 0; animation: fade-up .8s 1.9s ease-out forwards; }
.hero2 .cta { margin-top: 26px; display: inline-flex; gap: 10px; opacity: 0; animation: fade-up .8s 2.1s ease-out forwards; }
.btn { display: inline-block; padding: 12px 24px; border-radius: 999px; font-weight: 700; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.btn.primary { background: var(--teal); color: #fff; box-shadow: 0 6px 0 #1f9a8f; }
.btn.primary:hover { transform: translateY(-2px); box-shadow: 0 8px 0 #1f9a8f; }
.btn.ghost { color: var(--teal-dark); background: #fff; box-shadow: 0 6px 0 #d9ece9; }
.btn.ghost:hover { transform: translateY(-2px); }

/* rolling hills at the bottom */
.hills { position: absolute; left: 0; right: 0; bottom: -1px; height: 150px; z-index: -1; }
.hills svg { position: absolute; left: 0; bottom: 0; display: block; width: 200%; height: 100%; }
.hills .back { animation: slide 40s linear infinite; }
.hills .front { animation: slide 26s linear infinite reverse; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* scroll-in for sections */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
.card { transition: transform .25s ease, box-shadow .25s ease; }
.card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(28,138,129,.12); }

@media (max-width: 600px) {
  .hero2 { min-height: 0; padding: 56px 16px 120px; }
  .hero2 .tagline { font-size: 17px; }
  .hills { height: 100px; }
  .cloud.c3, .cloud.c4 { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero2 *, .hero2 *::before, .hero2 *::after { animation: none !important; opacity: 1 !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
}