/* ===== TIFFANIA — Home page FX: glass (Apple-style), gradient stage, floating dandelion seeds, 3D, animated text ===== */
@property --sw { syntax: '<angle>'; inherits: true; initial-value: -7deg; }

.home-stage{
  --glass-bg: linear-gradient(135deg, rgba(255,255,255,.70) 0%, rgba(255,255,255,.36) 100%);
  --glass-border: rgba(255,255,255,.78);
  --glass-shadow: 0 14px 44px rgba(8,127,123,.14), 0 2px 10px rgba(8,127,123,.07), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.28);
  --glass-blur: blur(22px) saturate(175%);
  position:relative; padding-block:26px 120px;
  background:
    linear-gradient(180deg, #FAF7F2 0%, #E0F6F4 14%, #C6EEEA 36%, #EFE5CC 60%, #CFEFEB 80%, #B9E8E4 100%);
}
.home-stage > main{position:relative; z-index:2;}
.home-stage section.block{margin-block-start:64px;}
.home-stage .trust-strip{margin-block-start:10px;}

/* ---------- animated gradient background ---------- */
.stage-bg{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0;}
.orbs,.stage-seeds{position:absolute; inset:0; will-change:transform;}
.orbs{transform:translate3d(0, calc(var(--sc, 0) * -.05px), 0);}
.stage-seeds{transform:translate3d(0, calc(var(--sc, 0) * -.12px), 0);}
.orb{position:absolute; border-radius:50%; filter:blur(58px); opacity:.95; animation:orb-drift 24s ease-in-out infinite alternate; will-change:transform;}
.o1{top:2%; inset-inline-end:-10%; width:56vw; height:56vw; background:radial-gradient(circle, rgba(10,186,181,.9), rgba(10,186,181,0) 68%);}
.o2{top:19%; inset-inline-start:-12%; width:44vw; height:44vw; background:radial-gradient(circle, rgba(198,161,91,.72), rgba(198,161,91,0) 68%); animation-duration:30s; animation-delay:-8s;}
.o3{top:41%; inset-inline-end:2%; width:42vw; height:42vw; background:radial-gradient(circle, rgba(60,205,199,.95), rgba(60,205,199,0) 68%); animation-duration:27s; animation-delay:-14s;}
.o4{top:62%; inset-inline-start:-6%; width:48vw; height:48vw; background:radial-gradient(circle, rgba(8,150,146,.68), rgba(8,150,146,0) 68%); animation-duration:33s; animation-delay:-4s;}
.o5{top:84%; inset-inline-end:-8%; width:44vw; height:44vw; background:radial-gradient(circle, rgba(226,196,130,.9), rgba(226,196,130,0) 68%); animation-duration:26s; animation-delay:-19s;}
@keyframes orb-drift{
  0%{transform:translate3d(0,0,0) scale(1);}
  50%{transform:translate3d(-6vw,4vh,0) scale(1.12);}
  100%{transform:translate3d(5vw,-5vh,0) scale(.94);}
}

/* small floating dandelion seeds (background + a few foreground for depth) */
.st-seed{position:absolute; display:block; will-change:transform;}
.st-seed svg{display:block; width:100%; height:100%; animation:seed-float var(--dur, 22s) ease-in-out infinite; animation-delay:var(--del, 0s); filter:drop-shadow(0 0 6px var(--glow, rgba(255,255,255,.9)));}
.st-seed.far svg{filter:blur(1.4px) drop-shadow(0 0 5px var(--glow, rgba(255,255,255,.8)));}
@keyframes seed-float{
  0%{transform:translate3d(0,0,0) rotate(-8deg); opacity:0;}
  12%{opacity:var(--op, .85);}
  50%{transform:translate3d(var(--dx, 40px), -70px, 0) rotate(10deg);}
  88%{opacity:var(--op, .85);}
  100%{transform:translate3d(calc(var(--dx, 40px) * -.6), -150px, 0) rotate(-6deg); opacity:0;}
}
.stage-fg{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:6;}
.stage-fg .st-seed{transform:translate3d(0, calc(var(--sc, 0) * -.3px), 0);}

/* ---------- glass surfaces ---------- */
.home-stage .trust-item,
.home-stage .cat-card,
.home-stage .block-head,
.home-stage .story-band,
.home-stage .p-card,
.home-stage .a-card,
.home-stage .ribbon{
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .home-stage .trust-item,.home-stage .cat-card,.home-stage .block-head,.home-stage .story-band,.home-stage .p-card,.home-stage .a-card,.home-stage .ribbon{background:rgba(255,255,255,.88);}
}
.home-stage .block-head{padding:14px 24px; border-radius:24px; margin-block-end:24px; align-items:center; position:relative; overflow:hidden;}
.home-stage .block-head h2{font-size:1.7rem; position:relative; padding-block-end:2px;}
.home-stage .block-head h2::after{content:""; position:absolute; inset-inline-start:0; bottom:-8px; height:3px; width:0; border-radius:3px; background:linear-gradient(90deg,var(--gold),var(--gold-light)); transition:width .9s cubic-bezier(.2,.8,.2,1) .5s;}
.home-stage .block-head h2.split-in::after,.home-stage .block-head h2:not(.split-ready)::after{width:54px;}
/* slow light sweep across glass, like the sheen on an iPhone */
.home-stage .block-head::before,.home-stage .story-band::before{content:""; position:absolute; inset-block:0; width:38%; inset-inline-start:-50%; background:linear-gradient(105deg, transparent, rgba(255,255,255,.55), transparent); transform:skewX(-18deg); animation:sheen 9s ease-in-out infinite; pointer-events:none;}
.home-stage .story-band{position:relative; overflow:hidden;}
@keyframes sheen{0%,62%{inset-inline-start:-50%;} 100%{inset-inline-start:130%;}}

.home-stage .trust-item{border-radius:20px;}
.home-stage .trust-ic{background:rgba(255,255,255,.7); box-shadow:inset 0 1px 0 #fff, 0 4px 12px rgba(8,127,123,.12);}
.home-stage .cat-card{border-radius:24px; box-shadow:var(--glass-shadow); position:relative;}
.home-stage .cat-card .ci{background:linear-gradient(145deg, rgba(255,255,255,.9), rgba(207,242,239,.7)); box-shadow:inset 0 1px 0 #fff, 0 8px 18px rgba(8,127,123,.16);}
.home-stage .p-card,.home-stage .a-card{border-radius:22px;}
.home-stage .p-card:hover,.home-stage .a-card:hover,.home-stage .cat-card:hover{box-shadow:0 22px 50px rgba(8,127,123,.22), inset 0 1px 0 #fff;}
.home-stage .p-body,.home-stage .a-body{background:transparent;}
.home-stage .story-band{border-radius:32px; padding:46px 42px;}

/* deals: frosted teal glass */
.home-stage .deals-band{background:linear-gradient(135deg, rgba(6,92,89,.80), rgba(10,186,181,.62)); -webkit-backdrop-filter:blur(24px) saturate(160%); backdrop-filter:blur(24px) saturate(160%); border:1px solid rgba(255,255,255,.38); box-shadow:0 24px 60px rgba(8,127,123,.32), inset 0 1px 0 rgba(255,255,255,.45);}

/* newsletter: frosted tinted glass */
.home-stage .newsletter{background:linear-gradient(135deg, rgba(10,186,181,.62), rgba(8,127,123,.80)); -webkit-backdrop-filter:blur(24px) saturate(170%); backdrop-filter:blur(24px) saturate(170%); border:1px solid rgba(255,255,255,.42); box-shadow:0 24px 60px rgba(8,127,123,.30), inset 0 1px 0 rgba(255,255,255,.5); position:relative; overflow:hidden;}
.home-stage .newsletter::before{content:""; position:absolute; inset-block:0; width:34%; inset-inline-start:-50%; background:linear-gradient(105deg, transparent, rgba(255,255,255,.35), transparent); transform:skewX(-18deg); animation:sheen 8s ease-in-out infinite; pointer-events:none;}
.home-stage .nl-form input{background:rgba(255,255,255,.85); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:inset 0 1px 0 #fff;}

/* ---------- ribbon (moving text) + dividers ---------- */
.ribbon{margin-block:34px 0; border-radius:20px; overflow:hidden; padding-block:12px; transform:rotate(-1.1deg); direction:ltr;}
.ribbon.rev{transform:rotate(1.1deg); margin-block:70px 0;}
.ribbon-track{display:flex; align-items:center; gap:26px; width:max-content; animation:ribbon-run 46s linear infinite;}
.ribbon.rev .ribbon-track{animation-direction:reverse;}
.ribbon-track span{font-weight:800; font-size:1.05rem; color:var(--primary-darker); white-space:nowrap; letter-spacing:.01em; direction:rtl;}
.ribbon-track svg{width:16px; height:24px; color:var(--gold); flex-shrink:0;}
@keyframes ribbon-run{from{transform:translateX(0);} to{transform:translateX(-50%);}}

.divider{display:flex; align-items:center; gap:16px; margin-block:58px 0; opacity:.95;}
.divider span{flex:1; height:1px; background:linear-gradient(90deg, transparent, rgba(8,127,123,.4), transparent);}
.divider svg{width:22px; height:32px; color:var(--gold); filter:drop-shadow(0 0 8px rgba(198,161,91,.55)); animation:seed-bob 5s ease-in-out infinite;}
@keyframes seed-bob{0%,100%{transform:translateY(0) rotate(-6deg);} 50%{transform:translateY(-7px) rotate(6deg);}}

/* ---------- animated text ---------- */
.split-ready .w{display:inline-block; overflow:hidden; vertical-align:bottom; padding-block:.22em .12em; margin-block:-.22em -.12em;}
.split-ready .wi{display:inline-block; transform-origin:50% 100%; will-change:transform;}
.split-ready:not(.split-in) .wi{transform:translateY(112%) rotateX(-55deg); opacity:0;}
.split-ready .wi{transition:transform .95s cubic-bezier(.2,.8,.2,1), opacity .7s ease; transition-delay:calc(var(--i, 0) * 70ms + 80ms);}
.fx-ready:not(.fx-in){opacity:0; transform:translateY(18px);}
.fx-ready{transition:opacity .8s ease, transform .9s cubic-bezier(.2,.8,.2,1); transition-delay:var(--fd, 0ms);}
.deals-panel h2 em{position:relative;}

/* ---------- 3D: scroll reveals ---------- */
.home-stage .reveal{transition:opacity .9s cubic-bezier(.22,.61,.36,1), transform 1s cubic-bezier(.22,.61,.36,1);}
.home-stage .reveal.pre{opacity:0; transform:perspective(1200px) translateY(56px) rotateX(14deg) scale(.965); transform-origin:50% 100%;}
.home-stage .reveal-group.pre > *{opacity:0; transform:perspective(900px) translateY(40px) rotateX(16deg) rotateY(-14deg) scale(.95); transform-origin:50% 100%;}
.home-stage .reveal-group.pre > *:nth-child(even){transform:perspective(900px) translateY(40px) rotateX(16deg) rotateY(14deg) scale(.95);}
.home-stage .reveal-group > *{transition:opacity .8s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease, border-color .3s ease;}

/* ---------- 3D: pointer tilt on cards ---------- */
.tilt{transform-style:flat; will-change:transform;}
.tilt.is-tilting{transition:transform .09s linear, box-shadow .3s ease !important; transition-delay:0s !important;}
.tilt::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .3s ease; background:radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.55), transparent 55%); z-index:3;}
.tilt.is-tilting::after{opacity:1;}
.home-stage .tilt .p-thumb > svg,.home-stage .tilt .p-thumb > img,.home-stage .tilt .a-thumb svg,.home-stage .tilt .ci svg{transform:translate3d(calc(var(--px, 0) * 12px), calc(var(--py, 0) * 12px), 0) scale(1.05); transition:transform .12s linear;}
.home-stage .tilt .p-badges{transform:translate3d(calc(var(--px, 0) * 6px), calc(var(--py, 0) * 6px), 0); transition:transform .12s linear;}

/* ---------- 3D: story scene (true preserve-3d layers) ---------- */
.story-3d{perspective:900px; position:relative; overflow:visible; background:linear-gradient(150deg, rgba(127,219,214,.95), rgba(10,186,181,.92) 55%, rgba(8,127,123,.95)); box-shadow:0 26px 60px rgba(8,127,123,.3), inset 0 1px 0 rgba(255,255,255,.6); aspect-ratio:1/1;}
.s3-stage{position:absolute; inset:0; transform-style:preserve-3d; transform:rotateX(var(--srx, 0deg)) rotateY(calc(var(--sry, 0deg) + var(--sw))); animation:s3-sway 9s ease-in-out infinite alternate; transition:transform .12s linear;}
@keyframes s3-sway{from{--sw:-7deg;} to{--sw:7deg;}}
.s3-glow{position:absolute; inset:14%; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.55) 0%, rgba(255,255,255,.16) 45%, rgba(255,255,255,0) 70%); transform:translateZ(-90px) scale(1.25); filter:blur(6px);}
.s3-main{position:absolute; inset:9%; transform-style:preserve-3d;}
.s3-main svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible;}
.dl-front{transform:translateZ(36px); filter:drop-shadow(0 0 12px rgba(255,255,255,.55)) drop-shadow(0 18px 24px rgba(6,92,89,.3));}

/* ---------- hero 3D (pointer + idle sway, kept subtle so the dandelion stays round) ---------- */
.cine-mark-wrap{perspective:1000px;}
.cine-mark{transform-style:preserve-3d;}
.cine-mark svg{animation:hero-sway 9s ease-in-out infinite alternate; transform-origin:50% 40%;}
@keyframes hero-sway{from{transform:rotateY(-8deg) rotateX(2deg);} to{transform:rotateY(8deg) rotateX(-2deg);}}

/* ---------- responsive / accessibility ---------- */
@media (max-width:900px){
  .home-stage{--glass-blur: blur(14px) saturate(160%); padding-block-end:80px;}
  .home-stage section.block{margin-block-start:48px;}
  .home-stage .story-band{padding:26px 18px;}
  .home-stage .block-head{padding:12px 16px;}
  .home-stage .block-head h2{font-size:1.35rem;}
  .orb{filter:blur(46px);}
  .story-3d{max-width:340px; margin-inline:auto; width:100%;}
  .ribbon-track span{font-size:.92rem;}
}
@media (prefers-reduced-motion: reduce){
  .orb,.st-seed svg,.ribbon-track,.divider svg,.s3-stage,.cine-mark svg,.home-stage .block-head::before,.home-stage .story-band::before,.home-stage .newsletter::before{animation:none !important;}
  .split-ready:not(.split-in) .wi,.fx-ready:not(.fx-in){opacity:1; transform:none;}
  .home-stage .reveal.pre,.home-stage .reveal-group.pre > *{opacity:1; transform:none;}
  .stage-fg{display:none;}
}

/* product cards inside the frosted-teal deals band stay near-white for legibility */
.home-stage .deals-band .p-card{background:linear-gradient(135deg, rgba(255,255,255,.94), rgba(255,255,255,.82));}

/* no cream gap between the gradient stage and the footer */
.home-stage + .site-footer{margin-block-start:0;}