/* Homepage only (index.html) */

@keyframes rise{from{opacity:0;transform:translateY(24px)}}
@keyframes pop{from{opacity:0;transform:translateZ(60px) scale(.85)}}
@keyframes drift{to{transform:translate(60px,40px) scale(1.1)}}
@keyframes float{to{translate:0 -12px}}
@keyframes thicken{from{font-weight:100;letter-spacing:.08em;transform:translateY(100%)}}

/* Hero: product photos floating over a dark night backdrop */
.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--night);color:#fff;padding:0}
.hero .g1{--s:680px;background:var(--blue);left:-300px;top:-320px;opacity:.5;animation:drift 16s ease-in-out infinite alternate}
.hero .g2{--s:520px;background:var(--gold);right:-260px;bottom:-360px;opacity:.22;animation:drift 20s ease-in-out infinite alternate-reverse}
.pitch{position:absolute;inset:0;width:100%;height:100%;z-index:-1;fill:none;stroke:rgba(255,255,255,.08);stroke-width:1.5}
@media(prefers-reduced-motion:no-preference){
  .pitch *{stroke-dasharray:1200;stroke-dashoffset:1200;animation:draw 2.4s var(--ease) .2s forwards}
  @keyframes draw{to{stroke-dashoffset:0}}
}

.hero-in{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:2rem;min-height:min(84vh,800px);padding-top:3rem;padding-bottom:7rem}
.hero h1{font-size:clamp(2.9rem,7vw,6.6rem);font-weight:800;text-transform:uppercase;line-height:.94;letter-spacing:-.01em}
.hero h1 .kicker{display:block;font-size:clamp(.9rem,1.3vw,1.05rem);font-weight:600;letter-spacing:.16em;line-height:1.4;color:var(--blue-l);margin-bottom:1rem;animation:rise .9s var(--ease) .1s backwards}
.ln{display:block;overflow:hidden;padding-bottom:.04em;white-space:nowrap}
.ln>i{display:block;font-style:normal;animation:thicken 1.25s var(--ease) .15s backwards}
.ln:nth-child(3)>i{animation-delay:.3s}
.ln .hl{color:var(--blue)}
.hero .lead{font-size:1.15rem;color:#c3d3e0;max-width:32rem;margin:1.7rem 0 2.2rem;animation:rise .9s var(--ease) .6s backwards}
.cta{display:flex;gap:.9rem;flex-wrap:wrap;animation:rise .9s var(--ease) .75s backwards}
@supports (animation-timeline:scroll()){
  @media(prefers-reduced-motion:no-preference){
    .hero h1{animation:squeeze linear both;animation-timeline:scroll(root);animation-range:0 70vh}
    @keyframes squeeze{to{font-weight:300;opacity:.45}}
  }
}

.hero-art{position:relative;align-self:stretch;display:grid;align-content:center;perspective:1000px;animation:rise 1.1s var(--ease) .35s backwards}
.tilt{position:relative;width:min(100%,460px);margin:0 auto;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d;transition:transform .6s var(--ease)}
.shot{border-radius:32px;overflow:hidden;background:#fff;box-shadow:0 50px 80px -30px rgba(0,0,0,.7);transform:rotate(-4deg);animation:float 7s ease-in-out 1.5s infinite alternate}
.shot img{width:100%;height:auto}
.mini{position:absolute;width:34%;border-radius:22px;overflow:hidden;background:#fff;box-shadow:0 30px 50px -20px rgba(0,0,0,.7);transform:translateZ(40px);animation:pop .8s var(--ease) backwards}
.mini img{width:100%;height:auto}
.m-a{right:-9%;bottom:-6%;rotate:6deg;animation-delay:.9s}
.m-b{left:-10%;top:-5%;rotate:-8deg;animation-delay:1s}
.callout{position:absolute;z-index:1;pointer-events:none;display:flex;align-items:center;gap:.6rem;padding:.65rem 1.05rem;border-radius:999px;font-size:.9rem;font-weight:500;white-space:nowrap;transform:translateZ(40px);animation:pop .7s var(--ease) backwards}
.callout.glass.dark{background:rgba(6,17,28,.84);color:#fff}
.callout::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(255,194,26,.3)}
.c-a{left:-6%;bottom:18%;animation-delay:1.1s}
.c-b{right:-4%;top:16%;animation-delay:1.25s}

/* Trust bar: frosted glass straddling the hero's bottom edge */
.trust{position:relative;z-index:2;margin-top:-3.9rem}
.trust-bar{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);border-radius:22px;overflow:hidden;background:rgba(255,255,255,.84);animation:rise .9s var(--ease) 1.2s backwards}
.trust-bar li{display:flex;gap:.9rem;align-items:flex-start;padding:1.4rem 1.5rem}
.trust-bar li+li{border-left:1px solid var(--line)}
.trust-bar svg{flex:none;width:26px;height:26px;fill:none;stroke:var(--blue-d);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.trust strong{display:block;font-size:.96rem}
.trust span{font-size:.88rem;color:var(--muted)}

/* Categories */
.cats-sec{padding-top:6.5rem}
.cats-sec .head h2,.products .head h2{font-size:clamp(1.7rem,3vw,2.4rem)}
/* Each card is a small 3D scene: home.js sets --rx/--ry (tilt) and --gx/--gy (light position) from the pointer.
   The photo face sits at the back; chip, text and button float in front at different depths. */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
.cat{--rx:0deg;--ry:0deg;--gx:50%;--gy:30%;--lift:0px;position:relative;display:block;aspect-ratio:4/5;text-decoration:none;color:var(--night);border-radius:24px;transform-style:preserve-3d;transform:perspective(1000px) translateY(var(--lift)) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .7s var(--ease)}
.cat.live{transition:transform .12s linear}
.cat:hover,.cat:focus-visible{--lift:-8px}
.cat:focus-visible{outline:none}
.cat:focus-visible .cat-face{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--blue),0 40px 60px -30px rgba(6,17,28,.6)}
.cat-face{position:absolute;inset:0;isolation:isolate;border-radius:inherit;overflow:hidden;background:#fff;box-shadow:0 1px 0 var(--line),0 24px 40px -30px rgba(6,17,28,.55);transition:box-shadow .5s var(--ease)}
.cat:hover .cat-face{box-shadow:0 1px 0 var(--line),calc(var(--ry) * -2.4) calc(48px + var(--rx) * 2.4) 60px -30px rgba(6,17,28,.55)}
.cat img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transform:scale(1.04) translate(calc(var(--ry) * -.9),calc(var(--rx) * .9));transition:transform .9s var(--ease)}
.cat:hover img{transform:scale(1.12) translate(calc(var(--ry) * -.9),calc(var(--rx) * .9))}
.cat.live img{transition:transform .15s linear}
/* Moving highlight, like light catching a glossy print */
.cat-glare{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;background:radial-gradient(circle at var(--gx) var(--gy),rgba(255,255,255,.55),rgba(255,255,255,.12) 28%,transparent 55%);mix-blend-mode:soft-light;transition:opacity .5s}
.cat:hover .cat-glare{opacity:1}
/* Thin rim of light along the edge */
.cat-face::before{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;padding:1px;background:linear-gradient(140deg,rgba(255,255,255,.9),rgba(255,255,255,0) 40%,rgba(255,255,255,0) 70%,rgba(255,255,255,.35));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.cat-chip{position:absolute;left:1rem;top:1rem;padding:.3rem .75rem;border-radius:999px;background:rgba(255,255,255,.9);color:var(--night);font-size:.78rem;font-weight:600;box-shadow:0 10px 18px -8px rgba(6,17,28,.45);transform:translateZ(22px) scale(.978)}
/* Frosted white label floating over the bottom of the photo */
.cat-txt{position:absolute;left:.75rem;right:.75rem;bottom:.75rem;padding:.85rem 3.6rem .85rem 1rem;border-radius:13px;background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);border:1px solid rgba(255,255,255,.9);box-shadow:0 16px 30px -18px rgba(6,17,28,.45);transform:translateZ(30px) scale(.97)}
.cat h3{font-size:1.15rem;font-weight:700;line-height:1.15}
.cat p{font-size:.85rem;color:var(--muted);margin-top:.1rem}
.cat-go{position:absolute;right:1.45rem;bottom:1.45rem;display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%;background:var(--blue);box-shadow:0 12px 22px -8px rgba(41,169,225,.7);transform:translateZ(40px) scale(.96);transition:transform .35s var(--ease),background .25s}
.cat-go svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ease)}
.cat:hover .cat-go{transform:translateZ(40px) scale(1.04);background:var(--blue-d)}
.cat:hover .cat-go svg{transform:translateX(2px)}

/* Entrance: cards swing up into place one after another (home.js adds .reveal, then .in when seen) */
@media(prefers-reduced-motion:no-preference){
  .cats.reveal .cat{opacity:0;transform:perspective(1000px) translateY(60px) rotateX(28deg) scale(.94);transition:transform 1.1s var(--ease),opacity .8s}
  .cats.reveal .cat:nth-child(2){transition-delay:.09s}
  .cats.reveal .cat:nth-child(3){transition-delay:.18s}
  .cats.reveal .cat:nth-child(4){transition-delay:.27s}
  .cats.reveal.in .cat{opacity:1;transform:perspective(1000px) translateY(var(--lift)) rotateX(var(--rx)) rotateY(var(--ry))}
}
.products{background:#fff}

/* About strip: story on the left, key facts tiles on the right */
.story{background:radial-gradient(640px 420px at 0% 0%,rgba(41,169,225,.13),transparent 70%),radial-gradient(520px 380px at 100% 100%,rgba(255,194,26,.1),transparent 70%),var(--chalk)}
.story-in{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:4rem;align-items:center}
.story .eyebrow{margin-bottom:.7rem}
.story .prose p{color:var(--muted)}

/* How ordering works */
.team{position:relative;isolation:isolate;overflow:hidden;background:var(--night);color:#fff}
.team .g1{--s:720px;background:var(--blue);right:-280px;top:-340px;opacity:.4}
.team .g2{--s:480px;background:var(--gold);left:-300px;bottom:-360px;opacity:.14}
.team-in{display:grid;grid-template-columns:1.05fr .95fr;gap:4rem;align-items:center}
.team .sub{color:#c3d3e0;margin:1.2rem 0 2rem;max-width:32rem}
.steps{list-style:none;counter-reset:s;display:grid;gap:.8rem;margin-bottom:2.2rem}
.steps li{counter-increment:s;display:flex;gap:1.1rem;align-items:center;padding:1.05rem 1.3rem;border-radius:16px}
.steps li::before{content:counter(s);flex:none;display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:50%;background:var(--blue-d);font-weight:700;font-size:1.1rem}
.steps b{display:block}
.steps span{color:#c3d3e0;font-size:.93rem}
.mosaic{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.mosaic img{width:100%;height:auto;border-radius:22px;background:#fff;box-shadow:0 30px 50px -30px rgba(0,0,0,.8)}
.mosaic img:nth-child(even){translate:0 2rem}

/* Wide screens: keep the homepage cards a sensible size (square category cards, all 8 popular products in one row) */
@media(min-width:1500px){.tilt{width:min(100%,600px)}.cat{aspect-ratio:1}}
@media(min-width:1700px){.products .grid{grid-template-columns:repeat(8,1fr);gap:1.1rem}.products .card h3{font-size:.95rem}}
@media(max-width:900px){
  .hero-in{grid-template-columns:1fr;min-height:0;gap:2.5rem;padding-top:2.5rem;padding-bottom:7rem}
  .tilt{width:min(78%,380px)}
  .trust-bar{grid-template-columns:1fr 1fr}
  .trust-bar li+li{border-left:0}
  .trust-bar li:nth-child(even){border-left:1px solid var(--line)}
  .trust-bar li:nth-child(n+3){border-top:1px solid var(--line)}
  .cats{grid-template-columns:1fr 1fr}
  .team-in{grid-template-columns:1fr;gap:3rem}
  .story-in{grid-template-columns:1fr;gap:2.5rem}
}
@media(max-width:520px){
  .callout{font-size:.78rem;padding:.5rem .85rem}
  .c-a{left:-4%}.c-b{right:-2%}
  .trust-bar{grid-template-columns:1fr}
  .trust-bar li:nth-child(even){border-left:0}
  .trust-bar li+li{border-top:1px solid var(--line)}
  .cat-txt{left:.5rem;right:.5rem;bottom:.5rem;padding:.6rem 2.9rem .6rem .7rem;border-radius:12px}.cat-go{right:.95rem;bottom:1rem;width:2.1rem;height:2.1rem}
  .cat h3{font-size:.95rem}.cat p{font-size:.74rem}
}

/* Section transitions: no hard color edges between sections.
   Glows fade out at each section's top and bottom (base.css .lights), light sections blend into white,
   and each section that changes color slides over the one above like a sheet with rounded top corners,
   widening to full width as it scrolls in. Section content drifts up into place as it appears. */
.products{background:linear-gradient(180deg,var(--chalk),#fff 220px)}
.story+.alt{background:linear-gradient(180deg,var(--chalk),#fff 260px)}
.design-band,.story,.quote-band{position:relative;z-index:1;margin-top:-3rem;border-radius:3rem 3rem 0 0;box-shadow:0 -24px 50px -34px rgba(6,17,28,.45)}
.design-band,.story,.quote-band{padding-top:7rem}
@supports (animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    .design-band,.story,.quote-band{animation:sheet linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
    @keyframes sheet{from{clip-path:inset(0 5% 0 5% round 3rem 3rem 0 0)}to{clip-path:inset(0 0 0 0 round 3rem 3rem 0 0)}}
    main section:not(.hero,.trust) .wrap>*:not(.cats){animation:drift-in linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
    @keyframes drift-in{from{opacity:0;translate:0 48px}}
  }
}
@media(max-width:520px){
  .design-band,.story,.quote-band{margin-top:-2rem;border-radius:2rem 2rem 0 0}
  @keyframes sheet{from{clip-path:inset(0 3% 0 3% round 2rem 2rem 0 0)}to{clip-path:inset(0 0 0 0 round 2rem 2rem 0 0)}}
}