/* ============================================================
   KOLORZ SCROLL STORY V2 — FV → /02 cards → /03 web
   Load AFTER kolorz-home.css. FV material/colors/typography
   remain original; only the new storytelling layers are styled.
   No 2×2 grid, no universal 100svh scene height, no scroll snap.
============================================================ */
:root { --kx-pink:#ff00a2; --kx-white:#f5f5f2; --kx-muted:#c6bfca; }
/* clip (not hidden) avoids creating a new scroll container for sticky/pin */
body.kolorz-home-page #kolorz-app { overflow-x:clip; overflow-y:visible; }
body.kolorz-home-page .kx-story-stage { position:relative; z-index:5; width:100%; }
body.kolorz-home-page .kx-story-stage .k-hero { height:100svh; }
.kx-story-stage *, .kx-web * { box-sizing:border-box; }
.kx-story-stage a, .kx-web a { color:inherit; }
.kx-story-stage a:focus-visible, .kx-web a:focus-visible { outline:2px solid var(--kx-pink); outline-offset:4px; }

/* /02: Normal flow if JS/CDN is missing. Once ScrollTrigger is ready,
   this shares a single pinned stage with the existing original hero. */
.kx-cards {
  position:relative; isolation:isolate; width:100%; min-height:max(740px,100svh);
  padding:clamp(110px,12vh,170px) clamp(25px,4vw,70px) 95px;
  overflow:hidden; background:radial-gradient(ellipse at 76% 50%,#3a0f32 0%,#150b1a 46%,#09090a 82%);
  color:var(--kx-white);
}
.kx-cards__ambient { position:absolute; inset:0; pointer-events:none; opacity:.38;
  background:linear-gradient(120deg,transparent 40%,rgba(255,0,162,.13) 70%,transparent 95%); }
.kx-cards__copy { position:relative; z-index:5; max-width:700px; }
.kx-index { margin:0; margin-bottom:clamp(18px,2.5vw,38px);
  font:500 clamp(11px,.86vw,14px)/1.2 "Helvetica Neue",Arial,sans-serif;
  letter-spacing:.22em; color:#ff6fbf; }
.kx-index span { color:#d1cbd1; margin-left:18px; }
.kx-heading { margin:0; font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:clamp(53px,6.7vw,123px); font-weight:750; line-height:.86;
  letter-spacing:-.069em; text-transform:uppercase; }
.kx-heading em { font-style:normal; color:var(--kx-pink); }
.kx-subcopy { margin:clamp(22px,3vw,42px) 0 0; max-width:36em; font-size:clamp(12px,1vw,16px);
  line-height:1.95; letter-spacing:.025em; color:#d9cfd9; }
.kx-link { display:inline-flex; align-items:center; justify-content:space-between; gap:24px;
  min-height:45px; margin-top:clamp(18px,2.4vw,33px); padding:0 0 9px;
  border-bottom:1px solid rgba(255,99,180,.85); text-decoration:none;
  color:var(--kx-white)!important; font:700 clamp(10px,.83vw,14px)/1.3 "Helvetica Neue",Arial,sans-serif;
  letter-spacing:.14em; transition:color .2s ease; }
.kx-link:hover { color:#ff78c0!important; }
.kx-link > span { color:var(--kx-pink); font-size:24px; font-weight:400; }
.kx-cards__note { position:absolute; bottom:32px; left:clamp(25px,4vw,70px); z-index:5;
  font:500 10px/1.4 "Helvetica Neue",Arial,sans-serif; letter-spacing:.25em; color:#b79bb3; }

.kx-deck { position:absolute; z-index:3; top:51%; right:1%; width:min(50vw,780px);
  height:min(68svh,610px); transform:translateY(-50%); pointer-events:none; perspective:900px; }
.kx-card { position:absolute; top:50%; left:50%; width:clamp(155px,20vw,292px); aspect-ratio: .72;
  transform:translate(-50%,-50%); border:2px solid #ffe6f5; border-radius:13px;
  padding:7px; background:linear-gradient(130deg,#ffc1ea,#ff40ae 25%,#971163 72%,#ffb6e8);
  box-shadow:0 14px 45px rgba(0,0,0,.48); }
.kx-card--back { background:linear-gradient(125deg,#cba5ef,#7a308e 55%,#261342); border-color:#cc9be5; }
.kx-card--side { background:linear-gradient(125deg,#ffc6a5,#b93d72 52%,#40172f); border-color:#ffa9cb; }
.kx-card--front { z-index:2; }
.kx-card__inside { position:relative; height:100%; border:1px solid rgba(255,255,255,.75);
  border-radius:6px; overflow:hidden; padding:12px;
  background:radial-gradient(circle at 45% 37%,rgba(255,247,255,.29),transparent 49%); }
.kx-card__edition, .kx-card__caption, .kx-card__small { position:absolute; z-index:2; left:12px; right:12px;
  font:700 clamp(7px,.7vw,11px)/1.2 "Helvetica Neue",Arial,sans-serif; letter-spacing:.08em; color:#fff; }
.kx-card__edition { top:11px; }
.kx-card__caption { bottom:29px; }
.kx-card__small { bottom:12px; font-size:clamp(6px,.54vw,9px); opacity:.75; }
.kx-card__portrait, .kx-card__gem { position:absolute; inset:0; display:grid; place-items:center;
  font-size:clamp(96px,13vw,195px); font-weight:200; line-height:1;
  color:#fff7fd; text-shadow:0 0 30px #ffbce4, 0 0 55px rgba(255,54,146,.55); }
.kx-card__gem { font-size:clamp(72px,9vw,140px); }

/* One pin ONLY; the /02 headline and card stay together in the pinned view. */
html.kx-scroll-on .kx-story-stage { height:100svh; }
html.kx-scroll-on .kx-cards { position:absolute; inset:0; z-index:8; min-height:0;
  height:100%; padding:0; background:transparent; pointer-events:none; }
html.kx-scroll-on .kx-cards__ambient { opacity:1; background:radial-gradient(ellipse at 74% 50%,rgba(159,14,95,.19),transparent 55%); }
html.kx-scroll-on .kx-cards__copy { position:absolute; top:30%; left:clamp(25px,4vw,70px);
  width:min(56vw,860px); max-width:none; }
html.kx-scroll-on .kx-cards__note { bottom:5%; }
html.kx-scroll-on .kx-deck { top:52%; }

/* /03: ordinary document flow, inner sticky stage. Not a ScrollTrigger pin. */
.kx-web { position:relative; z-index:6; width:100%; min-height:clamp(950px,155svh,1700px);
  background:#0b0d13; color:var(--kx-white); }
.kx-web__sticky { position:sticky; top:0; width:100%; height:100svh;
  min-height:620px; overflow:hidden; isolation:isolate;
  padding:clamp(100px,15vh,160px) clamp(25px,4vw,70px); }
.kx-web__glow { position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 73% 70%,rgba(236,20,137,.12),transparent 56%),
             linear-gradient(90deg,#0a0b10,#11131b); }
.kx-web__copy { position:relative; z-index:5; width:min(53vw,780px); }
.kx-web__visual { position:absolute; z-index:2; width:57%; height:66%; right:2%; bottom:9%; pointer-events:none; }
.kx-code, .kx-browser { position:absolute; overflow:hidden; border:1px solid #494050;
  border-radius:12px; box-shadow:0 16px 55px rgba(0,0,0,.4); }
.kx-code { top:12%; right:4%; width:83%; height:79%; background:rgba(15,15,24,.95); }
.kx-window-bar { display:flex; align-items:center; gap:7px; width:100%; height:35px; padding:0 14px;
  background:#28252d; border-bottom:1px solid rgba(255,255,255,.1); }
.kx-window-bar i { display:block; width:8px; height:8px; border-radius:50%; background:#e65e86; }
.kx-window-bar i:nth-child(2) { background:#f0b46e; }
.kx-window-bar i:nth-child(3) { background:#7ed39e; }
.kx-window-bar span { margin-left:12px; font:500 11px/1 monospace; letter-spacing:.07em; color:#c5bccb; }
.kx-code__lines { padding:clamp(15px,2vw,28px); white-space:pre-wrap;
  font:500 clamp(10px,.92vw,15px)/1.85 "SFMono-Regular",Consolas,Menlo,monospace; color:#c8b8de; }
.kx-code__caret { display:inline-block; width:7px; height:14px; margin:0 0 0 25px; background:#ff7fc5; opacity:.6; }
.kx-browser { top:38%; left:7%; width:73%; height:53%; background:#eee7ed; }
.kx-browser__canvas { display:flex; flex-direction:column; justify-content:space-between;
  height:calc(100% - 35px); padding:clamp(18px,3vw,45px); background:
  radial-gradient(circle at 87% 31%,#ef2b87 0,#7c194f 24%,transparent 25%),
  linear-gradient(128deg,#1d1121,#28192d); }
.kx-browser__canvas > span, .kx-browser__canvas > small { font:600 clamp(8px,.7vw,11px)/1.2 Arial,sans-serif;
  letter-spacing:.2em; color:#eeceeb; }
.kx-browser__canvas strong { font:800 clamp(24px,3.5vw,63px)/.92 Arial,sans-serif;
  letter-spacing:-.055em; }
.kx-browser__canvas strong em { color:#ff39a0; font-style:normal; }

@media (max-width:1100px) and (min-width:768px) {
  html.kx-scroll-on .kx-cards__copy { top:26%; width:67%; }
  .kx-heading { font-size:clamp(55px,7vw,88px); }
  .kx-deck { right:-5%; width:58%; }
  .kx-web__copy { width:70%; }
  .kx-web__visual { right:-7%; width:64%; bottom:5%; }
}
@media (max-width:767px) {
  .kx-cards { min-height:870px; padding:95px 20px 410px; }
  .kx-index { font-size:10px; margin-bottom:17px; }
  .kx-index span { margin-left:10px; }
  .kx-heading { font-size:clamp(42px,10.6vw,68px); line-height:.9; }
  .kx-subcopy { font-size:clamp(11px,2.8vw,13px); line-height:1.75; margin-top:18px; }
  .kx-link { font-size:10px; min-height:34px; margin-top:13px; }
  .kx-deck { left:0; right:0; top:auto; bottom:30px; width:100%; height:345px; transform:none; }
  .kx-card { width:clamp(140px,43vw,188px); border-radius:9px; padding:4px; }
  .kx-card__inside { padding:7px; }
  .kx-card__caption,.kx-card__edition { font-size:8px; left:7px; right:7px; }
  .kx-card__small { font-size:7px; left:7px; }
  .kx-card__portrait { font-size:94px; }
  .kx-card__gem { font-size:74px; }
  .kx-cards__note { display:none; }
  html.kx-scroll-on .kx-cards { padding:0; min-height:0; }
  html.kx-scroll-on .kx-cards__copy { top:clamp(80px,12svh,130px); left:20px; right:20px; width:auto; }
  html.kx-scroll-on .kx-deck { top:62%; bottom:auto; left:0; height:39%; }

  .kx-web { min-height:max(1010px,170svh); }
  .kx-web__sticky { min-height:0; height:100svh; padding:clamp(82px,11svh,120px) 20px 40px; }
  .kx-web__copy { width:100%; }
  .kx-web__visual { top:48%; bottom:4%; right:-9%; width:112%; height:49%; }
  .kx-code { width:92%; right:3%; top:2%; height:82%; }
  .kx-browser { left:11%; top:35%; width:81%; height:60%; }
  .kx-code__lines { font-size:9px; padding:12px; line-height:1.5; }
  .kx-browser__canvas { padding:15px; }
  .kx-browser__canvas strong { font-size:clamp(22px,6vw,34px); }
  .kx-window-bar { height:28px; }
  .kx-browser__canvas { height:calc(100% - 28px); }
  .kx-window-bar span { font-size:8px; }
}
@media (max-width:767px) and (max-height:690px) {
  html.kx-scroll-on .kx-cards__copy { top:71px; }
  .kx-heading { font-size:clamp(38px,9.6vw,56px); }
  .kx-subcopy { font-size:10px; margin-top:12px; }
  .kx-link { margin-top:8px; }
  html.kx-scroll-on .kx-deck { top:65%; height:37%; }
  .kx-card { width:clamp(125px,36vw,160px); }
  .kx-web__sticky { padding-top:75px; }
  .kx-web__visual { top:52%; height:44%; }
}
@media (prefers-reduced-motion:reduce) {
  .kx-story-stage { height:auto!important; }
  .kx-cards { position:relative!important; inset:auto!important; height:auto!important; min-height:760px!important;
    padding:100px 20px 380px!important; pointer-events:auto!important; }
  .kx-cards__copy { position:relative!important; top:auto!important; left:auto!important; width:auto!important; }
  .kx-deck { top:auto!important; bottom:15px!important; left:0!important; width:100%!important; height:330px!important; }
  .kx-web { min-height:0; }
  .kx-web__sticky { position:relative; height:auto; min-height:850px; }
}