/* ==========================================================================
   AniBee Preschool - site.css
   Everything Tailwind utilities cannot express: patterns, textures,
   scroll-reveal, marquee masks, accordion chrome, print rules.
   ========================================================================== */

:root{
  --honey:#F2A007;
  --honey-soft:#FFCE5C;
  --ink:#171C28;
  --cream:#FFFBF3;
  --ring:rgba(242,160,7,.45);
}

/* ---------- Base -------------------------------------------------------- */
html{ scroll-behavior:smooth; scroll-padding-top:6.5rem; -webkit-text-size-adjust:100%; }
body{ background:var(--cream); color:var(--ink); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
::selection{ background:var(--honey-soft); color:#3d2a05; }

:where(a,button,summary,input,textarea,select):focus-visible{
  outline:3px solid var(--ring); outline-offset:3px; border-radius:.6rem;
}

/* Optical tuning for the display serif */
.font-display{ font-optical-sizing:auto; font-variation-settings:"SOFT" 30,"WONK" 1; letter-spacing:-.015em; }

/* Thin, warm scrollbar */
@media (pointer:fine){
  *{ scrollbar-width:thin; scrollbar-color:#E7DCC8 transparent; }
  ::-webkit-scrollbar{ width:10px; height:10px; }
  ::-webkit-scrollbar-thumb{ background:#E7DCC8; border-radius:99px; border:3px solid var(--cream); }
  ::-webkit-scrollbar-thumb:hover{ background:#D9C9AC; }
}

/* ---------- Decorative patterns ---------------------------------------- */
/* Honeycomb - the brand texture. Sits behind hero and section headers. */
.bg-honeycomb{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0l28 16.17v32.33L28 64.67 0 48.5V16.17z' fill='none' stroke='%23F2A007' stroke-opacity='.18' stroke-width='1.4'/%3E%3C/svg%3E");
  background-size:56px 97px;
}
.bg-dots{
  background-image:radial-gradient(currentColor 1.1px, transparent 1.2px);
  background-size:18px 18px;
}
.bg-grid{
  background-image:linear-gradient(to right,rgba(23,28,40,.05) 1px,transparent 1px),
                   linear-gradient(to bottom,rgba(23,28,40,.05) 1px,transparent 1px);
  background-size:40px 40px;
}

/* Fades a decorative layer out toward the edges */
.mask-fade{ -webkit-mask-image:radial-gradient(70% 70% at 50% 40%,#000 35%,transparent 100%);
            mask-image:radial-gradient(70% 70% at 50% 40%,#000 35%,transparent 100%); }
.mask-fade-x{ -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
              mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }

/* Hand-drawn highlight behind a word */
.swash{ position:relative; display:inline-block; white-space:nowrap; }
.swash > svg{ position:absolute; left:-2%; bottom:-.42em; width:104%; height:.55em; overflow:visible; pointer-events:none; }
.swash > svg path{ stroke-dasharray:1000; stroke-dashoffset:1000; animation:swash-draw 1.5s .35s cubic-bezier(.22,1,.36,1) forwards; }
@keyframes swash-draw{ to{ stroke-dashoffset:0; } }

/* Soft aurora blobs used in hero and CTA bands.
   Kept deliberately faint - they are a tint behind the type, never a wash over it. */
.aurora{ filter:blur(72px); opacity:.3; will-change:transform; }

/* ---------- Scroll reveal ---------------------------------------------- */
[data-reveal]{ opacity:0; transform:translateY(26px); }
[data-reveal].is-in{ opacity:1; transform:none;
  transition:opacity .75s cubic-bezier(.22,1,.36,1), transform .75s cubic-bezier(.22,1,.36,1); }
[data-reveal="left"]{ transform:translateX(-28px); }
[data-reveal="right"]{ transform:translateX(28px); }
[data-reveal="zoom"]{ transform:scale(.94); }

/* ---------- Marquee ----------------------------------------------------- */
.marquee{ display:flex; width:max-content; }
.marquee:hover{ animation-play-state:paused; }

/* ---------- Cards ------------------------------------------------------- */
.card-hover{ transition:transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s cubic-bezier(.22,1,.36,1); }
.card-hover:hover{ transform:translateY(-8px); }

/* Gradient hairline border */
.ring-gradient{ position:relative; }
.ring-gradient::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(140deg,rgba(255,206,92,.9),rgba(255,255,255,0) 42%,rgba(143,215,199,.7));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}

/* ---------- Accordion (native details element) -------------------------- */
details.faq summary{ list-style:none; cursor:pointer; }
details.faq summary::-webkit-details-marker{ display:none; }
details.faq summary .chev{ transition:transform .35s cubic-bezier(.22,1,.36,1); }
details.faq[open] summary .chev{ transform:rotate(180deg); }
details.faq[open] .faq-body{ animation:faq-open .45s cubic-bezier(.22,1,.36,1) both; }
@keyframes faq-open{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }

/* ---------- Timeline ---------------------------------------------------- */
.timeline-line{ background:linear-gradient(to bottom,transparent,#FFCE5C 12%,#FFCE5C 88%,transparent); }

/* ---------- Header state ------------------------------------------------ */
#siteHeader .header-shell{ transition:background .35s ease, box-shadow .35s ease, border-color .35s ease; }
#siteHeader[data-stuck="true"] .header-shell{
  background:rgba(255,251,243,.92); box-shadow:0 8px 30px -18px rgba(23,28,40,.45);
}
.nav-link{ position:relative; }
.nav-link::after{
  content:""; position:absolute; left:12px; right:12px; bottom:6px; height:2px; border-radius:2px;
  background:var(--honey); transform:scaleX(0); transform-origin:left;
  transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.nav-link:hover::after,.nav-link[aria-current="page"]::after{ transform:scaleX(1); }

/* Mobile drawer */
#mobileNav{ transition:opacity .3s ease, transform .35s cubic-bezier(.22,1,.36,1); }
#mobileNav.is-closed{ opacity:0; transform:translateY(-12px); pointer-events:none; }

/* ---------- Forms ------------------------------------------------------- */
.field{
  width:100%; border-radius:1rem; border:1px solid #EADFCB; background:#fff;
  padding:.9rem 1.05rem; font-size:.95rem; color:#171C28;
  transition:border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.field::placeholder{ color:#A9B0BF; }
.field:hover{ border-color:#E0CFAE; }
.field:focus{ outline:none; border-color:var(--honey); box-shadow:0 0 0 4px rgba(242,160,7,.16); }
select.field{
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235D6880' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center; padding-right:2.6rem;
}

/* ---------- Buttons ----------------------------------------------------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
      border-radius:999px; font-weight:700; letter-spacing:-.01em; white-space:nowrap;
      transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, background .3s ease, color .3s ease; }
.btn:active{ transform:translateY(1px) scale(.99); }

.btn-primary{ background:var(--ink); color:#fff; padding:.9rem 1.6rem; box-shadow:0 14px 30px -16px rgba(23,28,40,.85); }
.btn-primary:hover{ background:#0E121B; transform:translateY(-2px); box-shadow:0 20px 38px -18px rgba(23,28,40,.9); }
.btn-honey{ background:var(--honey); color:#2A1B02; padding:.9rem 1.6rem; box-shadow:0 16px 34px -16px rgba(242,160,7,.85); }
.btn-honey:hover{ background:#FFB81F; transform:translateY(-2px); }
.btn-ghost{ background:#fff; color:#171C28; padding:.9rem 1.6rem; border:1px solid #EADFCB; }
.btn-ghost:hover{ border-color:var(--honey); transform:translateY(-2px); box-shadow:0 14px 28px -18px rgba(23,28,40,.4); }

/* Compact variant for the header. Declared after the variants above so it wins;
   the Play CDN injects its utility sheet after this file, so padding utilities
   cannot be relied on to override a .btn-* variant. */
.btn-sm{ padding:.62rem 1.25rem; font-size:.875rem; line-height:1.25rem; }

/* Gentle attention pulse on the primary conversion button */
.pulse-ring{ position:relative; }
.pulse-ring::after{
  content:""; position:absolute; inset:-3px; border-radius:inherit; border:2px solid var(--honey);
  opacity:0; animation:pulse-out 3.2s ease-out infinite; pointer-events:none;
}
@keyframes pulse-out{ 0%{ opacity:.55; transform:scale(1);} 70%{ opacity:0; transform:scale(1.16);} 100%{ opacity:0; } }

/* ---------- Gallery ----------------------------------------------------- */
.tilt{ transition:transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s ease; }
.tilt:hover{ transform:perspective(900px) rotateX(2deg) rotateY(-3deg) translateY(-6px) scale(1.02); }

/* ---------- Reduced motion --------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
                        transition-duration:.001ms !important; }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  .swash > svg path{ stroke-dashoffset:0 !important; }
}

/* ---------- Print ------------------------------------------------------- */
@media print{
  #siteHeader,#mobileNav,.no-print{ display:none !important; }
  body{ background:#fff; }
}