/*
Theme Name: Diamond Group Flow Motion V19
Theme URI: https://diamondgroup.local/
Author: Diamond Group Demo
Description: Controlled scroll-driven 3D product demo inspired by Flowcard motion principles.
Version: 1.2.0
Text Domain: dg-flow-v19
*/
:root{
  --bg:#07111d;
  --text:#f7fbff;
  --muted:rgba(232,240,248,.70);
  --subtle:rgba(218,230,241,.48);
  --cyan:#59dff3;
  --blue:#2373e6;
  --pad:clamp(24px,5vw,84px);
  --card-w:min(27.5vw,460px);
  --radius:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:auto;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
#dg-flow{min-height:100vh;background:#07111d}
.dg-header{position:fixed;z-index:90;left:0;right:0;top:0;height:82px;display:flex;align-items:center;pointer-events:none;background:linear-gradient(180deg,rgba(5,12,20,.78),rgba(5,12,20,.18) 72%,transparent)}
.dg-header__inner{width:100%;padding:0 var(--pad);display:flex;align-items:center;justify-content:space-between;gap:24px}
.dg-brand{display:flex;align-items:center;gap:14px;pointer-events:auto}
.dg-brand img{width:166px;height:auto;object-fit:contain}
.dg-brand span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(235,243,250,.58)}
.dg-nav{display:flex;gap:26px;font-size:12px;color:rgba(235,243,250,.55);pointer-events:auto}
.dg-status{font-size:9px;letter-spacing:.17em;text-transform:uppercase;color:rgba(235,243,250,.42)}
.dg-experience{position:relative;height:1240vh}
.dg-stage{position:sticky;top:0;height:100vh;overflow:hidden;isolation:isolate;background:#07111d}
.dg-bg{position:absolute;inset:-4%;opacity:0;will-change:opacity,transform}
.dg-bg--0{background:radial-gradient(circle at 72% 24%,rgba(89,223,243,.16),transparent 25%),linear-gradient(180deg,#07111d 0%,#0b2440 56%,#1567d8 115%)}
.dg-bg--1{background:radial-gradient(circle at 68% 44%,rgba(89,223,243,.18),transparent 24%),linear-gradient(160deg,#06101b 0%,#0d2f50 62%,#0b1b2d 100%)}
.dg-bg--2{background:radial-gradient(circle at 32% 54%,rgba(40,118,229,.24),transparent 26%),linear-gradient(150deg,#07111d,#0a2138 56%,#0a1624)}
.dg-bg--3{background:radial-gradient(circle at 67% 55%,rgba(89,223,243,.14),transparent 23%),linear-gradient(150deg,#06101a,#10304c 56%,#07131f)}
.dg-bg--4{background:radial-gradient(circle at 36% 68%,rgba(40,118,229,.21),transparent 24%),linear-gradient(155deg,#07111d,#0b263e 58%,#07121e)}
.dg-bg--5{background:radial-gradient(circle at 65% 72%,rgba(89,223,243,.16),transparent 22%),linear-gradient(165deg,#06101a,#102c48 60%,#07111c)}
.dg-grid{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.10;background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);background-size:78px 78px;mask-image:radial-gradient(circle at center,#000,transparent 80%)}
.dg-copy{position:absolute;z-index:35;width:min(31vw,470px);pointer-events:none;will-change:opacity,transform,filter}
.dg-copy--left{left:var(--pad)}
.dg-copy--right{right:var(--pad)}
.dg-copy[data-copy="0"]{top:58%}
.dg-copy[data-copy="1"]{top:38%}
.dg-copy[data-copy="2"]{top:34%}
.dg-copy[data-copy="3"]{top:38%}
.dg-copy[data-copy="4"]{top:34%}
.dg-copy[data-copy="5"]{top:32%}
.dg-kicker{font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:var(--cyan);margin-bottom:16px}
.dg-copy h1,.dg-copy h2{margin:0;color:#fff;font-weight:700;letter-spacing:-.045em;line-height:.96}
.dg-copy h1{font-size:clamp(48px,5.6vw,82px)}
.dg-copy h2{font-size:clamp(42px,4.6vw,66px)}
.dg-copy p{margin:19px 0 0;max-width:440px;font-size:16px;line-height:1.70;color:var(--muted)}
.dg-copy small{display:block;margin-top:16px;max-width:395px;font-size:12px;line-height:1.62;color:var(--subtle)}

.dg-card-world{position:absolute;inset:0;z-index:22;perspective:1600px;pointer-events:none}
.dg-card-motion{position:absolute;left:50%;top:50%;width:var(--card-w);aspect-ratio:1.586/1;transform-style:preserve-3d;will-change:transform;filter:drop-shadow(0 32px 56px rgba(0,0,0,.42))}
.dg-card-pointer{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.dg-card{position:absolute;inset:0;transform-style:preserve-3d;border-radius:var(--radius)}
.dg-face{position:absolute;inset:0;border-radius:var(--radius);overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:1px solid rgba(206,220,230,.23);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -18px 34px rgba(0,0,0,.26),inset 0 0 0 1px rgba(0,0,0,.22)}
.dg-front{transform:translateZ(3px);background:radial-gradient(circle at 76% 14%,rgba(94,229,255,.12),transparent 20%),radial-gradient(circle at 18% 86%,rgba(43,95,178,.16),transparent 28%),linear-gradient(120deg,rgba(255,255,255,.032) 0%,rgba(255,255,255,0) 32%),repeating-linear-gradient(107deg,rgba(255,255,255,.014) 0 1px,transparent 1px 3px),linear-gradient(145deg,#17293a 0%,#0b1620 52%,#102130 100%)}
.dg-back{transform:rotateY(180deg) translateZ(3px);background:linear-gradient(120deg,rgba(255,255,255,.02),transparent 24%),repeating-linear-gradient(107deg,rgba(255,255,255,.013) 0 1px,transparent 1px 3px),linear-gradient(145deg,#13212d,#09121b 68%,#122433)}
.dg-surface-noise{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.035) .7px, transparent .7px);background-size:7px 7px;opacity:.22;mix-blend-mode:soft-light;pointer-events:none}
.dg-card-logo{position:absolute;left:7.8%;top:8.5%;width:31%;height:auto;object-fit:contain;filter:saturate(.94) brightness(.99)}
.dg-product-type{position:absolute;right:8%;top:11.8%;font-size:7px;letter-spacing:.24em;text-transform:uppercase;color:rgba(224,235,242,.74)}
.dg-chip{position:absolute;left:8.6%;top:34.5%;width:16.5%;height:auto;filter:drop-shadow(0 1px 1px rgba(0,0,0,.28))}
.dg-contactless{position:absolute;right:8.2%;top:14%;width:9%;height:17%;opacity:.76}
.dg-contactless span{position:absolute;border:2px solid #dce6ed;border-left-color:transparent;border-bottom-color:transparent;border-radius:50%;transform:rotate(45deg)}
.dg-contactless span:nth-child(1){inset:34%}.dg-contactless span:nth-child(2){inset:18%}.dg-contactless span:nth-child(3){inset:2%}
.dg-card-mark{position:absolute;right:10%;top:30%;width:40%;height:40%;border:1px solid rgba(255,255,255,.03);transform:skewX(-10deg) rotate(-3deg);border-radius:16px;opacity:.65}
.dg-card-mark:before,.dg-card-mark:after{content:"";position:absolute;inset:17%;border:1px solid rgba(255,255,255,.035);border-radius:12px}.dg-card-mark:after{inset:34%}
.dg-card-number{position:absolute;left:8.2%;top:58%;font-size:10px;letter-spacing:.16em;font-weight:600;color:#eef4f8;text-shadow:0 1px 1px rgba(0,0,0,.32)}
.dg-valid-wrap{position:absolute;left:8.2%;top:69%;display:flex;align-items:flex-end;gap:5px;color:#d9e5ed}.dg-valid-wrap span{font-size:4.7px;letter-spacing:.18em;opacity:.68}.dg-valid-wrap strong{font-size:7.2px;letter-spacing:.14em;font-weight:600}
.dg-cardholder{position:absolute;left:8.2%;bottom:11%;font-size:6.6px;letter-spacing:.2em;text-transform:uppercase;color:rgba(228,236,244,.88)}
.dg-network{position:absolute;right:8%;bottom:10%;width:16%;height:11%}.dg-network span{position:absolute;top:0;bottom:0;width:47%;border-radius:50%;mix-blend-mode:screen;opacity:.88}.dg-network span:first-child{left:0;background:radial-gradient(circle at 35% 35%,rgba(255,196,88,.95),rgba(224,140,50,.84) 60%,rgba(180,87,18,.75) 100%)}.dg-network span:last-child{right:0;background:radial-gradient(circle at 35% 35%,rgba(255,113,80,.95),rgba(203,55,59,.84) 60%,rgba(129,20,24,.75) 100%)}
.dg-card-bottom{position:absolute;left:8.2%;bottom:6.2%;font-size:4.9px;letter-spacing:.18em;text-transform:uppercase;color:rgba(227,238,247,.56)}
.dg-magstripe{position:absolute;left:0;right:0;top:14%;height:19%;background:linear-gradient(180deg,#1d2127,#030405 42%,#0e1013 100%)}
.dg-back-band{position:absolute;left:0;right:0;top:35%;height:14%;background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.05));opacity:.16}
.dg-signature-row{position:absolute;left:7.8%;right:7.8%;top:52%;display:flex;align-items:stretch;gap:8px}
.dg-signature{flex:1;height:12%;min-height:26px;border-radius:4px;background:linear-gradient(180deg,#eef2f4,#bcc8d1);position:relative;overflow:hidden}.dg-signature:after{content:"JOHNSON / DG";position:absolute;left:8px;top:50%;transform:translateY(-50%) rotate(-2deg);font-size:7px;letter-spacing:.06em;color:#57636c;font-style:italic;opacity:.86}
.dg-cvv{width:17%;min-width:34px;border-radius:4px;background:linear-gradient(180deg,#edf3f7,#cfd8de);display:flex;align-items:center;justify-content:center;font-size:8px;letter-spacing:.2em;color:#203344;font-weight:700}
.dg-back-chipline{position:absolute;left:7.8%;right:7.8%;top:68%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent)}
.dg-back-copy{position:absolute;left:7.8%;right:7.8%;bottom:17%;font-size:4.7px;line-height:1.65;letter-spacing:.08em;color:rgba(219,229,237,.65)}
.dg-back-footer{position:absolute;left:7.8%;right:7.8%;bottom:8%;display:flex;justify-content:space-between;gap:12px;font-size:4.8px;letter-spacing:.08em;text-transform:uppercase;color:rgba(227,237,245,.56)}
.dg-edge{position:absolute;inset:0;border-radius:var(--radius);box-shadow:0 0 0 1px rgba(201,218,228,.16),0 0 0 2px rgba(5,10,16,.86);pointer-events:none}
.dg-side{position:absolute;background:linear-gradient(180deg,#203244,#0c141d);backface-visibility:hidden}.dg-side--top,.dg-side--bottom{left:8px;right:8px;height:6px}.dg-side--top{top:-1px;transform:rotateX(90deg) translateZ(3px);transform-origin:top center}.dg-side--bottom{bottom:-1px;transform:rotateX(-90deg) translateZ(3px);transform-origin:bottom center}.dg-side--left,.dg-side--right{top:8px;bottom:8px;width:6px}.dg-side--left{left:-1px;transform:rotateY(-90deg) translateZ(3px);transform-origin:left center}.dg-side--right{right:-1px;transform:rotateY(90deg) translateZ(3px);transform-origin:right center}
.dg-fan-card{position:absolute;inset:0;border-radius:var(--radius);opacity:0;transform-style:preserve-3d;will-change:transform,opacity;box-shadow:0 22px 45px rgba(0,0,0,.24)}
.dg-fan-card--1{background:linear-gradient(145deg,#174bbd,#09296c);border:1px solid rgba(120,184,255,.38)}
.dg-fan-card--2{background:linear-gradient(145deg,#7345dc,#372086);border:1px solid rgba(185,156,255,.34)}
.dg-fan-card--3{background:linear-gradient(145deg,#30cce1,#11748d);border:1px solid rgba(154,242,255,.36)}

.dg-progress{position:absolute;right:24px;top:50%;z-index:50;transform:translateY(-50%);display:flex;flex-direction:column;gap:12px}
.dg-progress i{display:block;width:3px;height:24px;border-radius:4px;background:rgba(255,255,255,.13)}
.dg-progress i.active{height:40px;background:var(--cyan)}
.dg-scroll-cue{position:absolute;z-index:36;left:50%;bottom:24px;transform:translateX(-50%);font-size:9px;letter-spacing:.17em;text-transform:uppercase;color:rgba(235,243,250,.47);white-space:nowrap}
.dg-scroll-cue:after{content:"";display:block;width:1px;height:28px;margin:9px auto 0;background:linear-gradient(var(--cyan),transparent)}
.dg-after{position:relative;z-index:5;padding:105px var(--pad) 78px;background:#f4f8fb;color:#142338}
.dg-after__inner{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.2fr .8fr;gap:9vw;align-items:start}
.dg-after h2{margin:0;font-size:clamp(42px,5.4vw,74px);line-height:.98;letter-spacing:-.04em;font-weight:700}
.dg-after p{margin:22px 0 0;color:#536478;font-size:17px;line-height:1.75}
.dg-after__meta{padding-top:12px;border-top:1px solid #ccd6df;color:#637487;font-size:13px;line-height:1.75}
.dg-footer{display:flex;justify-content:space-between;gap:28px;padding:38px var(--pad);background:#07111d;color:rgba(235,243,250,.53);font-size:11px}
@media(max-width:980px){:root{--card-w:min(43vw,470px)}.dg-copy{width:32vw}.dg-copy h1{font-size:48px}.dg-copy h2{font-size:41px}.dg-copy p{font-size:14px}.dg-nav{display:none}}
@media(max-width:720px){:root{--card-w:min(75vw,410px);--pad:20px}.dg-header{height:70px}.dg-brand img{width:138px}.dg-brand span{display:none}.dg-status{font-size:7px}.dg-experience{height:1260vh}.dg-copy{left:20px!important;right:20px!important;top:auto!important;bottom:62px!important;width:auto}.dg-copy h1{font-size:40px}.dg-copy h2{font-size:34px}.dg-copy p{font-size:13px;line-height:1.55;max-width:90%}.dg-copy small{display:none}.dg-kicker{font-size:8px;margin-bottom:9px}.dg-progress{right:9px;gap:8px}.dg-progress i{height:17px}.dg-progress i.active{height:27px}.dg-scroll-cue{display:none}.dg-after{padding:80px 20px 58px}.dg-after__inner{grid-template-columns:1fr;gap:42px}.dg-after p{font-size:15px}.dg-footer{padding:30px 20px;flex-direction:column}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}