/* The rest of the homepage, in the hero's spirit (2026-11-01). Loaded without
   blocking paint, so a page that has not got it yet is simply calm. Motion is
   transform/opacity only; `translate`, `scale` and `rotate` are used on cards so
   the hover's own `transform` keeps working. Entrances use scroll-driven
   animation: a browser without it just shows the finished page. */

.dsc-scrollbar{position:fixed;left:0;right:0;top:0;height:3px;z-index:1200;pointer-events:none;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,#D98C97,#E8C271 55%,#B7A5E0)}

.sec--paper{background:linear-gradient(180deg,var(--paper),#FFF8F0)}
.btn{position:relative;overflow:hidden}
.btn::before{content:"";position:absolute;top:0;bottom:0;left:-45%;width:34%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.34),transparent);transform:skewX(-18deg);transition:left .7s ease;pointer-events:none}
.btn:hover::before{left:115%}

/* cards catch the light under the pointer */
.tpl::after,.ben__card::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(260px circle at var(--sx,50%) var(--sy,50%),rgba(255,255,255,.34),rgba(255,255,255,0) 62%)}
.tpl:hover::after,.ben__card:hover::after{opacity:1}
.ben__card::after{background:radial-gradient(240px circle at var(--sx,50%) var(--sy,50%),rgba(243,190,190,.3),rgba(243,190,190,0) 65%)}
.tpl.is-tilt{transform:perspective(1000px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg)) translateY(-6px);transition:transform .12s linear,box-shadow var(--tr),border-color var(--tr);box-shadow:0 26px 50px -18px rgba(90,50,60,.34)}
.feat__card{transition:box-shadow .3s}
.feat__card:hover{box-shadow:0 34px 70px -22px rgba(90,50,60,.4)}

/* how it works: the line fills, a heart walks it */
.how__walk{display:none}
@media (min-width:961px){
  .how__walk{display:block;position:absolute;left:8%;top:29px;z-index:2;width:18px;height:18px;margin-left:-9px;color:var(--dusty-rose)}
  .how__walk svg{display:block;width:100%;height:100%;fill:currentColor}
}
.how__num{position:relative}
.how__num::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1.5px solid var(--dusty-rose);opacity:0}

/* reviews, stats and FAQ */
.tsm__track i{transform-origin:left}
.faq__item{transition:transform .2s,box-shadow .2s,border-color .2s}
.faq__item:hover{transform:translateY(-2px)}
.faq__item[open] p{animation:homeFaq .35s ease both}
@keyframes homeFaq{from{transform:translateY(-6px);opacity:0}}
.made__stat b{font-variant-numeric:tabular-nums}

/* pricing: a gold-rose edge and one glint */
.price{position:relative;overflow:hidden;border:1.5px solid transparent;background:linear-gradient(var(--warm-white),var(--warm-white)) padding-box,linear-gradient(120deg,#E9A3AC,#E8C271 45%,#BFB0E8) border-box}
.price::after{content:"";position:absolute;top:-20%;bottom:-20%;left:-24%;width:14%;background:linear-gradient(100deg,transparent,rgba(232,194,113,.2),transparent);transform:skewX(-16deg);pointer-events:none}
.price__now{background:linear-gradient(100deg,var(--ink) 30%,#B98A3C 50%,var(--ink) 70%);-webkit-background-clip:text;background-clip:text;color:transparent}

/* the last thing they see: the same night as the 3D Museum band */
.final{isolation:isolate;border:0;color:#F7EFE3;background:#17100F;box-shadow:0 30px 70px -26px rgba(50,28,34,.55)}
.final h2{color:#FFF8EC}
.final .lead{color:rgba(247,239,227,.76)}
.final .eyebrow{color:#E8C271}
.final .eyebrow::before{background:#E8C271}
.final .hand{color:#E8C271}
.final__stamp{border-color:#E8C271;color:#E8C271;opacity:.55}
.final::before,.final::after{content:"";position:absolute;z-index:-1;border-radius:50%;pointer-events:none}
.final::before{left:-14%;top:-40%;width:62%;aspect-ratio:1;background:radial-gradient(closest-side,rgba(217,120,140,.5),rgba(217,120,140,0))}
.final::after{right:-12%;bottom:-48%;width:58%;aspect-ratio:1;background:radial-gradient(closest-side,rgba(232,194,113,.34),rgba(232,194,113,0))}
.final .btn--rose{background:linear-gradient(180deg,#F2D78F,#D8AE5A);color:#2A1C0B;box-shadow:0 14px 34px rgba(216,174,90,.36)}
.final__fl{position:absolute;z-index:-1;bottom:-30px;width:15px;height:14px;background:#E79AA5;opacity:0;clip-path:path("M7.500 14C2.500 10.500 0 7.800 0 4.700 0 2 2 0 4.300 0 5.600 0 6.800.7 7.500 1.900 8.200.7 9.400 0 10.700 0 13 0 15 2 15 4.700c0 3.100-2.500 5.800-7.500 9.300z")}
.final__fl:nth-of-type(2n){background:#E8C271}

@media (prefers-reduced-motion:no-preference){
  .feat__card{animation:homeBob 8s ease-in-out infinite}
  .feat__shot:nth-child(odd){animation:homeBob 7s ease-in-out infinite}
  .feat__shot:nth-child(even){animation:homeBob 9s -2s ease-in-out infinite}
  .feat__wash{animation:homeWash 11s ease-in-out infinite}
  @keyframes homeBob{50%{translate:0 -9px}}
  @keyframes homeWash{50%{scale:1.04}}
  .ben__card:hover .ben__ico{animation:homeWiggle .6s ease}
  @keyframes homeWiggle{25%{rotate:-9deg}60%{rotate:7deg}}
  .how__walk{animation:homeWalk 9s ease-in-out infinite}
  @keyframes homeWalk{0%,8%{transform:translateX(0) scale(.8)}46%,54%{transform:translateX(calc(42vw * .96)) scale(1.1)}92%,100%{transform:translateX(min(84vw,1090px)) scale(.8)}}
  .how__step:nth-child(2) .how__num::after{animation:homeRing 4.5s 1s ease-out infinite}
  .how__step:nth-child(3) .how__num::after{animation:homeRing 4.5s 2.5s ease-out infinite}
  .how__step:nth-child(4) .how__num::after{animation:homeRing 4.5s 4s ease-out infinite}
  @keyframes homeRing{0%{transform:scale(1);opacity:.55}45%,100%{transform:scale(1.36);opacity:0}}
  .made__lines span{animation:homeLine 10s ease-in-out infinite}
  .made__lines span:nth-child(2){animation-delay:2.5s}
  .made__lines span:nth-child(3){animation-delay:5s}
  .made__lines span:nth-child(4){animation-delay:7.5s}
  @keyframes homeLine{0%,28%,100%{opacity:.5}8%,20%{opacity:1}}
  .price::after{animation:homeGlint 7s 1s ease-in-out infinite}
  @keyframes homeGlint{0%{transform:translateX(0) skewX(-16deg)}30%,100%{transform:translateX(1000%) skewX(-16deg)}}
  .final::before{animation:homeDrift 16s ease-in-out infinite alternate}
  .final::after{animation:homeDrift 21s ease-in-out infinite alternate-reverse}
  @keyframes homeDrift{to{transform:translate3d(13%,12%,0) scale(1.18)}}
  .final__stamp{animation:homeTurn 26s linear infinite}
  @keyframes homeTurn{to{rotate:348deg}}
  .final__fl{animation:homeFloat 12s linear infinite}
  .final__fl:nth-of-type(1){left:9%}
  .final__fl:nth-of-type(2){left:24%;animation-delay:-3s;animation-duration:15s}
  .final__fl:nth-of-type(3){left:43%;animation-delay:-7s}
  .final__fl:nth-of-type(4){left:62%;animation-delay:-2s;animation-duration:14s}
  .final__fl:nth-of-type(5){left:78%;animation-delay:-9s}
  .final__fl:nth-of-type(6){left:92%;animation-delay:-5s;animation-duration:16s}
  @keyframes homeFloat{0%{transform:translateY(0) rotate(0);opacity:0}14%{opacity:.75}85%{opacity:.4}100%{transform:translateY(-560px) rotate(160deg);opacity:0}}

  /* Scroll-driven entrances only where html.sda is set (Chromium, see home.php):
     Safari 26 runs animation-timeline but leaves cards stuck invisible and
     smears the Mini Gifts rail (owner's recording, 2026-11-04). */
  @supports (animation-timeline:view()){
    .sda .tpl,.sda .ben__card,.sda .how__step,.sda .price__list li,.sda .faq__item{animation:homeIn linear both;animation-timeline:view();animation-range:entry 0% entry 42%}
    .sda .tpl:nth-child(4n+2),.sda .ben__card:nth-child(3n+2){animation-range:entry 6% entry 48%}
    .sda .tpl:nth-child(4n+3),.sda .ben__card:nth-child(3n){animation-range:entry 12% entry 54%}
    .sda .tpl:nth-child(4n){animation-range:entry 18% entry 60%}
    @keyframes homeIn{from{opacity:0;translate:0 34px;scale:.965}}
    .sda .tsm__track i{animation:homeBar linear both;animation-timeline:view();animation-range:entry 20% entry 80%}
    @keyframes homeBar{from{transform:scaleX(0)}}
    .sda .feat__art{animation:homeDriftY linear both;animation-timeline:view()}
    @keyframes homeDriftY{from{translate:0 26px}to{translate:0 -26px}}
    .sda .eyebrow::before{transform-origin:left;animation:homeRule linear both;animation-timeline:view();animation-range:entry 0% entry 50%}
    @keyframes homeRule{from{transform:scaleX(0)}}
  }
}