/* DARK CODE TALES — 5-saga network mockup (v3). Extends style.css (IVEDA STUDIOS look). */
:root{--saga-accent:#d8bf94;--saga-rgb:216,191,148;--hdr:60px}
html{scroll-padding-top:0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.eyebrow,.manifesto em{color:var(--saga-accent);transition:color .6s}

/* ===== header: small logo + IVEDA only ===== */
.hub-nav{padding:10px clamp(16px,3vw,40px);height:var(--hdr)}
.hub-nav.scrolled{padding-block:10px}
.brand-logo{height:40px;width:auto;filter:drop-shadow(0 0 10px rgba(255,40,10,.35))}
.hub-nav .menu,.hub-nav .menu.open{position:static;inset:auto;flex-direction:row;opacity:1;pointer-events:auto;background:none;font-size:11px;gap:0}
.iveda-link{font-size:11px;font-weight:400;letter-spacing:.42em;margin-right:-.42em;color:#cfd4d9!important;padding:8px 2px}
.iveda-link::after{display:none}
.iveda-link:hover{color:#fff!important}
.hub-nav .burger{display:none!important}
.brand-text.red{color:#ff4a2e;text-shadow:0 0 14px rgba(255,40,10,.35)}

/* ===== hub: logo + 5 worlds above the fold, video behind ===== */
.hub{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;isolation:isolate;padding:calc(var(--hdr) + 4px) 0 clamp(14px,3vh,32px)}
.hub-bg{position:absolute;inset:0;z-index:-1;background:#000}
.hub-still,.hub-video{position:absolute;inset:-24px;width:calc(100% + 48px);height:calc(100% + 48px);max-width:none;object-fit:cover;filter:blur(5px) saturate(.9)}
.hub-video{opacity:0;transition:opacity 1.6s}
.hub-video.on{opacity:1}
.hub-shade{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.55)),
  linear-gradient(180deg,rgba(5,6,8,.35) 0%,transparent 25%,transparent 70%,var(--bg) 100%),
  radial-gradient(ellipse 60% 45% at 50% 30%,rgba(120,8,0,.22),transparent 70%)}
.hub-inner{display:flex;flex-direction:column;align-items:center;gap:clamp(4px,1.2vh,12px);width:100%}
.hub-logo{line-height:0;margin:0}
.keyart{width:min(60vw,900px,calc(30svh * 1.76));height:auto;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 60%,rgba(0,0,0,.55) 80%,transparent 100%);
  mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 60%,rgba(0,0,0,.55) 80%,transparent 100%)}
.hub-kicker{font-size:10.5px;letter-spacing:.42em;margin-right:-.42em;text-transform:uppercase;color:#d8c6c2}
.hub-row-wrap{position:relative;width:100%}
.hub-row{--cw:min(calc(46svh * .5625),calc((100vw - 120px) / 5));display:flex;justify-content:center;gap:12px;padding:6px 24px 10px}
.hub-card{--a:#d8bf94;position:relative;flex:0 0 var(--cw);width:var(--cw);aspect-ratio:9/16;border-radius:6px;overflow:hidden;background:#000;border:1px solid rgba(255,255,255,.12);isolation:isolate;
  transition:border-color .35s,box-shadow .45s,transform .45s var(--ease)}
.hub-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),filter .5s;filter:saturate(.95) brightness(.92)}
.hub-card::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,transparent 22%,transparent 55%,rgba(0,0,0,.88) 100%)}
.hub-card:hover,.hub-card:focus-visible,.hub-card.touch{border-color:var(--a);box-shadow:0 0 0 1px var(--a),0 18px 50px -14px var(--a);transform:translateY(-4px);outline:0}
.hub-card:hover img,.hub-card.touch img{transform:scale(1.05);filter:saturate(1.08) brightness(1)}
.hub-card .badge{position:absolute;z-index:2;top:10px;left:10px}
.hub-meta{position:absolute;z-index:2;left:12px;right:12px;bottom:12px;display:flex;flex-direction:column;gap:3px}
.hub-meta b{font-weight:400;font-size:clamp(11px,1vw,14px);letter-spacing:.16em;line-height:1.25;color:#fff}
.hub-meta i{font-style:normal;font-family:var(--serif);font-size:clamp(13px,1.1vw,16px);color:#d4d7db;line-height:1.2}
.swipe-hint{display:none}

/* badges */
.badge{--a:inherit;font-size:8.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;padding:5px 9px;border-radius:99px;border:1px solid color-mix(in srgb,var(--a) 75%,transparent);color:#fff;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:inline-flex;align-items:center;gap:6px;line-height:1.3;white-space:nowrap}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--a)}
.badge.b-watch::before{animation:pulse 1.8s infinite}
.badge.b-coming-soon::before{background:transparent;border:1px solid var(--a);width:5px;height:5px}
.badge.b-waitlist{border-style:dashed}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--a) 80%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* ===== slim world switcher (only after the hub) ===== */
.ribbon{position:fixed;left:0;right:0;top:var(--hdr);z-index:70;pointer-events:none}
.ribbon-track{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:8px clamp(12px,3vw,40px);justify-content:safe center;background:rgba(5,6,8,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line);
  transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .4s,transform .4s var(--ease)}
.ribbon.show .ribbon-track{opacity:1;transform:none;pointer-events:auto}
.ribbon-track::-webkit-scrollbar{display:none}
.world-btn{--a:#d8bf94;flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:6px 14px;border:1px solid var(--line);border-radius:99px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#cfd4d9;white-space:nowrap;transition:border-color .3s,background .3s,color .3s}
.world-btn .dot{width:6px;height:6px;border-radius:50%;background:var(--a)}
.world-btn:hover,.world-btn[aria-current=true]{border-color:var(--a);color:#fff;background:color-mix(in srgb,var(--a) 14%,transparent)}
.nav.scrolled{background:rgba(5,6,8,.85)}

/* ===== world sections ===== */
.world{--a:#d8bf94;--a2:#050608;position:relative;padding:clamp(56px,8vw,110px) 0;border-top:1px solid var(--line);background:radial-gradient(ellipse 60% 70% at 20% 50%,color-mix(in srgb,var(--a2) 55%,transparent),transparent 70%);scroll-margin-top:100px}
.world{scroll-margin-top:calc(var(--hdr) + 40px)}
.world::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:min(240px,40vw);background:var(--a)}
.world.flash .world-media{animation:flash 1.8s var(--ease)}
@keyframes flash{0%,100%{box-shadow:0 0 0 0 transparent}25%{box-shadow:0 0 0 2px var(--a),0 0 60px -10px var(--a)}}
.world-in{display:grid;grid-template-columns:minmax(220px,340px) 1fr;gap:clamp(28px,5vw,80px);align-items:center;max-width:1100px}
.world-media{aspect-ratio:9/16;border-radius:6px;border:1px solid var(--line);transition:border-color .4s,box-shadow .5s}
.world-media:hover{border-color:var(--a);box-shadow:0 0 0 1px var(--a),0 20px 60px -20px var(--a)}
.world-media .show-play:hover .card-play{background:var(--a);border-color:var(--a)}
.world-media .show-play:hover .card-play::after{border-left-color:#0b0b0d}
.world-body{display:flex;flex-direction:column;gap:10px;max-width:560px}
.world-num{display:flex;align-items:center;gap:14px;font-size:11px;letter-spacing:.3em;color:var(--dim)}
.world-num .badge{--a:inherit}
.world .show-genre{color:var(--a);font-size:10.5px}
.world h2{font-weight:200;font-size:clamp(30px,4.2vw,58px);letter-spacing:.12em;line-height:1.05;text-transform:uppercase}
.world .show-sub{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:#c9ced4}
.world .logline{font-family:var(--serif);font-size:clamp(19px,1.8vw,24px);line-height:1.45;color:#e2e2df;margin-top:6px}
.world .show-actions{margin-top:14px;padding-top:0}
.btn-saga{background:var(--a);color:#0b0b0d;font-weight:500;padding:12px 22px;font-size:12px;letter-spacing:.1em;box-shadow:0 10px 30px -14px var(--a)}
.btn-saga:hover{filter:brightness(1.1)}
.btn-ghost{border:1px solid rgba(255,255,255,.3);padding:12px 20px;font-size:12px;letter-spacing:.1em}
.btn-ghost:hover{border-color:var(--a);color:var(--a)}
.world .link-arrow{color:var(--a);border-color:color-mix(in srgb,var(--a) 40%,transparent);font-size:12.5px}
.waitlist{display:flex;flex-direction:column;gap:8px;margin-top:14px;max-width:420px}
.waitlist label{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}
.wl-row{display:flex;border:1px solid rgba(255,255,255,.18);border-radius:99px;overflow:hidden;transition:border-color .3s}
.wl-row:focus-within{border-color:var(--a)}
.wl-row input{flex:1;min-width:0;background:transparent;border:0;color:#fff;font:300 14px var(--sans);padding:12px 16px;outline:0}
.wl-row input::placeholder{color:var(--dim)}
.wl-row button{background:var(--a);color:#0b0b0d;font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;padding:0 18px;white-space:nowrap}
.wl-note{font-size:12px;color:var(--a)}
.wl-note:empty{display:none}
.world[data-slug=valeria]{background:radial-gradient(ellipse 60% 70% at 20% 50%,rgba(212,175,55,.06),transparent 70%),#060607}
.world[data-slug=dark-steamer]{background:radial-gradient(ellipse 60% 70% at 20% 50%,rgba(46,90,68,.35),transparent 70%)}

/* ===== mobile: snap carousel (~2.3 cards) + swipe hint ===== */
@media (max-width:760px){
  :root{--hdr:54px}
  .brand-logo{height:34px}
  .hub{min-height:0;justify-content:flex-start;padding-top:calc(var(--hdr) + 6px)}
  .keyart{width:min(96vw,520px);
    -webkit-mask-image:radial-gradient(ellipse 48% 50% at 50% 50%,#000 55%,rgba(0,0,0,.55) 75%,transparent 98%);
    mask-image:radial-gradient(ellipse 48% 50% at 50% 50%,#000 55%,rgba(0,0,0,.55) 75%,transparent 98%)}
  .hub-kicker{font-size:9px;letter-spacing:.32em;margin-top:-4px}
  .hub-row{--cw:calc((100vw - 16px - 2 * 10px) / 2.3);justify-content:flex-start;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:16px;padding:8px 16px 14px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .hub-row::-webkit-scrollbar{display:none}
  .hub-card{scroll-snap-align:start}
  .hub-card:hover{transform:none}
  .hub-card.touch{transform:translateY(-3px)}
  .hub-meta{left:9px;right:9px;bottom:9px}
  .hub-meta b{font-size:10.5px;letter-spacing:.12em}
  .hub-meta i{font-size:13px}
  .hub-card .badge{top:8px;left:8px;font-size:7.5px;padding:4px 7px;letter-spacing:.14em}
  .swipe-hint{display:flex;align-items:center;gap:6px;position:absolute;right:8px;bottom:-14px;font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:#d8c6c2;pointer-events:none;transition:opacity .4s}
  .swipe-hint i{font-style:normal;font-size:14px;letter-spacing:0;animation:nudge 1.4s ease-in-out infinite}
  .swipe-hint.gone{opacity:0}
  @keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
  .ribbon-track{justify-content:flex-start}
  .world{padding:48px 0 56px}
  .world-in{grid-template-columns:1fr;gap:24px}
  .world-media{aspect-ratio:4/5;max-width:100%}
  .world h2{font-size:30px}
  .world .logline{font-size:19px}
  .world .show-actions .btn{flex:1 1 auto;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.badge.b-watch::before,.swipe-hint i{animation:none}}