/* doltro.css — CASE_02 / DOLTRO CONNECT (e-commerce NFC) */
.work-intro{min-height:100vh;min-height:100dvh;background:var(--paper);color:var(--ink);padding:110px 4vw 90px;position:relative}
.poster-heading{font:clamp(60px,8.4vw,150px)/.78 var(--display);letter-spacing:-.075em;margin:50px 0 0}
.poster-heading span{color:var(--blue)}.poster-heading em{font-family:var(--serif);font-weight:400}
.work-intro.doltro{padding:90px 4vw 60px;overflow:hidden;background:var(--ink);color:var(--paper)}
.doltro-wrap{display:grid;grid-template-columns:1fr 1fr;gap:4vw;align-items:center;margin-top:20px}
.doltro-copy .poster-heading{font:clamp(48px,6vw,120px)/.8 var(--display);letter-spacing:-.07em;margin:30px 0 0;color:var(--paper)}
.doltro-copy .poster-heading span,.doltro-copy .poster-heading em{background:linear-gradient(95deg,#00dcff,#0c72ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.doltro-copy .poster-heading em{font-family:var(--serif);font-weight:400}
.doltro-sub{font-size:clamp(20px,1.6vw,30px);line-height:1.05;max-width:460px;margin:24px 0 0}
.doltro-flow{display:flex;align-items:center;gap:10px;margin:26px 0 0;font-size:9px;color:#8a877e}
.doltro-flow span{border:1px solid rgba(240,238,230,.45);padding:5px 9px;border-radius:99px;color:var(--paper)}
.doltro-right{display:flex;flex-direction:column;align-items:center;justify-self:center}
.doltro-card{position:relative;width:min(100%,340px);padding:22px 24px 18px;background:var(--paper);color:var(--ink);border-radius:18px;box-shadow:12px 12px 0 rgba(116,172,223,.4);transform:rotate(-2deg);display:flex;flex-direction:column;gap:14px}
.dc-top{font-size:9px;display:flex;justify-content:space-between;align-items:center}
.dc-nfc{background:var(--blue);color:var(--ink);padding:3px 7px;border-radius:99px;font-weight:600}
.dc-tap{display:flex;align-items:center;justify-content:center;position:relative;height:112px;margin-top:4px}
.dc-tap>i{position:absolute;border:2px solid var(--blue);border-radius:50%;width:64px;height:64px;opacity:.9}
.dc-tap>i:nth-child(2){width:96px;height:96px;opacity:.55}
.dc-tap>i:nth-child(3){width:128px;height:128px;opacity:.25}
.dl{position:relative;width:34px;height:34px;display:grid;place-items:center}
.dl-google{font:700 22px/1 var(--display);background:conic-gradient(#4285F4 0 40%,#34A853 40% 60%,#FBBC05 60% 80%,#EA4335 80% 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.dl-insta{width:32px;height:32px;border-radius:9px;background:linear-gradient(45deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5);display:grid;place-items:center;position:relative}
.dl-insta i{display:block;width:18px;height:18px;border:2px solid #fff;border-radius:5px;position:relative}
.dl-insta i:before{content:"";position:absolute;inset:0;margin:auto;width:8px;height:8px;border:1.8px solid #fff;border-radius:50%}
.dl-insta:after{content:"";position:absolute;top:4px;right:4px;width:4px;height:4px;border-radius:50%;background:#fff}
.dl-tiktok{width:28px;height:28px}
.dl-tiktok path{fill:var(--ink)}
.dc-tap-label{text-align:center;font-size:8px;letter-spacing:.12em}
.dc-stars{text-align:center;font-size:16px;color:#F6B40E;letter-spacing:3px}
.dc-meta{border-top:1px solid rgba(17,17,15,.3);padding-top:10px;font-size:8px;color:#6d6a61;display:flex;justify-content:space-between;gap:10px}
.dc-meta b{color:var(--ink)}
.dc-cta{display:flex;gap:12px;align-items:center;font-size:9px}
.dc-buy{background:var(--ink);color:var(--paper);padding:10px 14px;border-radius:99px}
.dc-how{border-bottom:1px solid var(--ink);padding-bottom:3px}

/* entry animation — replays every time the section enters */
.doltro .poster-heading{opacity:0;transform:translateY(46px);transition:opacity .7s ease,transform .9s cubic-bezier(.16,1,.3,1)}
.doltro.is-in .poster-heading{opacity:1;transform:none}
.doltro .doltro-sub{opacity:0;transform:translateY(26px);transition:opacity .6s ease .18s,transform .8s cubic-bezier(.16,1,.3,1) .18s}
.doltro.is-in .doltro-sub{opacity:1;transform:none}
.doltro .doltro-flow{opacity:0;transition:opacity .5s ease .4s}
.doltro.is-in .doltro-flow{opacity:1}
.doltro .doltro-flow span{transform:scale(0);transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.doltro.is-in .doltro-flow span{transform:scale(1)}
.doltro .doltro-flow span:nth-child(1){transition-delay:.45s}
.doltro .doltro-flow span:nth-child(2){transition-delay:.58s}
.doltro .doltro-flow span:nth-child(3){transition-delay:.71s}
.doltro .doltro-flow span:nth-child(4){transition-delay:.84s}
/* fan opening — replays every time the section enters */
.doltro-fan{position:relative;width:min(92%,540px);height:330px;display:flex;align-items:center;justify-content:center}
.doltro-fan .doltro-card{position:absolute;width:190px;padding:16px 16px 14px;gap:10px;overflow:hidden}
.doltro-fan .dc-tap{height:96px;margin-top:2px}
.doltro-fan .dc-tap>i{width:46px;height:46px}
.doltro-fan .dc-tap>i:nth-child(2){width:68px;height:68px}
.doltro-fan .dc-tap>i:nth-child(3){width:90px;height:90px}
.doltro-fan .dc-top{font-size:8px}
.doltro-fan .dc-tap-label{font-size:7px}
.doltro-fan .dc-stars{font-size:11px;letter-spacing:2px}
.doltro-fan .dc-meta{flex-direction:column;align-items:center;gap:2px;padding-top:8px}
.doltro-fan .dc-cta{flex-direction:column;gap:7px}
.doltro-fan .dc-buy{padding:8px 12px}
.doltro-fan .fan-c{z-index:2}
.doltro-fan .fan-l,.doltro-fan .fan-r{opacity:0;transform:translateY(34px);transition:opacity .5s ease .3s,transform .9s cubic-bezier(.16,1,.3,1) .3s}
.doltro-fan .fan-c{opacity:0;transform:translateY(24px) scale(.95);transition:opacity .5s ease .1s,transform .9s cubic-bezier(.16,1,.3,1) .1s}
.doltro.is-in .fan-l{opacity:1;transform:translateX(-126px) rotate(-16deg)}
.doltro.is-in .fan-c{opacity:1;transform:translateY(0) scale(1)}
.doltro.is-in .fan-r{opacity:1;transform:translateX(126px) rotate(16deg)}

/* ambient NFC pulse */
.dc-tap>i{animation:tap-ring 2.6s ease-out infinite}
.dc-tap>i:nth-child(2){animation-delay:.5s}
.dc-tap>i:nth-child(3){animation-delay:1s}
@keyframes tap-ring{0%{transform:scale(.6);opacity:.9}70%{transform:scale(1.05);opacity:.12}100%{transform:scale(1.05);opacity:0}}
.work-intro:not(.is-in) .dc-tap>i{animation-play-state:paused}

@media(max-width:900px){
  .work-intro{min-height:100svh;padding:48px 18px 28px;display:flex;flex-direction:column;justify-content:center}
  .doltro-wrap{grid-template-columns:1fr;gap:8px;margin-top:4px}
  .doltro-copy .poster-heading{margin-top:12px}
  .doltro-sub{margin-top:12px;font-size:15px}
  .doltro-fan{height:240px;transform:scale(.7)}
  .doltro-flow{display:none}
}
@media(max-height:820px){
  .work-intro .poster-heading{font-size:clamp(36px,10vh,64px)}
  .work-intro{padding:70px 4vw 40px}
  .doltro-flow{display:none}
}

/* brand ornaments per card */
.doltro-fan .doltro-card:before{content:"";position:absolute;top:0;left:0;right:0;height:5px;z-index:1}
.doltro-fan .doltro-card:after{content:"";position:absolute;width:130px;height:130px;border-radius:50%;right:-46px;bottom:-52px}
.fan-l:before{background:linear-gradient(90deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5)}
.fan-l:after{background:radial-gradient(circle,rgba(214,41,118,.16),transparent 70%)}
.fan-c:before{background:linear-gradient(90deg,#4285F4,#34A853,#FBBC05,#EA4335)}
.fan-c:after{background:radial-gradient(circle,rgba(66,133,244,.16),transparent 70%)}
.fan-r:before{background:linear-gradient(90deg,#00f2ea,#fe2c55)}
.fan-r:after{background:radial-gradient(circle,rgba(0,242,234,.16),transparent 70%)}
.fan-l .dc-tap>i{border-color:#d62976}
.fan-l .dc-tap>i:nth-child(2){border-color:#fa7e1e}
.fan-l .dc-tap>i:nth-child(3){border-color:#962fbf}
.fan-c .dc-tap>i{border-color:#4285F4}
.fan-c .dc-tap>i:nth-child(2){border-color:#EA4335}
.fan-c .dc-tap>i:nth-child(3){border-color:#34A853}
.fan-r .dc-tap>i{border-color:#00f2ea}
.fan-r .dc-tap>i:nth-child(2){border-color:#fe2c55}
.fan-r .dc-tap>i:nth-child(3){border-color:#00f2ea}
.fan-l .dc-nfc{background:#d62976;color:#fff}
.fan-c .dc-nfc{background:#4285F4;color:#fff}
.fan-r .dc-nfc{background:#00f2ea;color:var(--ink)}
.dc-orn{position:absolute;right:14px;top:50px;font:14px var(--mono);opacity:.45;pointer-events:none;z-index:2}
.fan-l .dc-orn{color:#962fbf}
.fan-c .dc-orn{color:#EA4335}
.fan-r .dc-orn{color:#fe2c55}