/* ============================================================
   ASMU — CINEMATIC PROJECTS REEL
   Injected by assets/js/reel.js only when the motion layer is active.
   Default styles = the stacked layout (phones / short screens).
   The pinned, scroll-scrubbed layout switches on at the media query below.
   Everything animated is transform / opacity (blur only while a scene is moving).
   ============================================================ */
.cin-reel{position:relative;margin:clamp(20px,3vw,44px) 0 clamp(36px,5vw,72px);}
.cin-skip{
  position:absolute;left:16px;top:10px;z-index:30;padding:9px 16px;border-radius:100px;
  background:var(--surface);border:1px solid var(--accent);color:var(--text);font-size:13px;font-weight:600;
  transform:translateY(-300%);transition:transform .25s var(--ease);
}
.cin-skip:focus{transform:none;}

.cin-stage{
  position:relative;isolation:isolate;background:var(--bg);overflow:hidden;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
}
.cin-stage::before{ /* faint engineering grid, static (rasterised once) */
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.7;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(ellipse 75% 70% at 50% 45%,#000,transparent 78%);
  mask-image:radial-gradient(ellipse 75% 70% at 50% 45%,#000,transparent 78%);
}
.cin-stage::after{ /* cinematic vignette */
  content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
  background:radial-gradient(ellipse 90% 85% at 50% 50%,transparent 55%,rgba(0,0,0,.38) 100%);
}
[data-theme="light"] .cin-stage::after{background:radial-gradient(ellipse 90% 85% at 50% 50%,transparent 62%,rgba(15,23,42,.10) 100%);}

/* ---------- a scene (stacked layout) ---------- */
.cin-scene{position:relative;z-index:1;padding:clamp(44px,9vw,84px) 0;}
.cin-scene + .cin-scene{border-top:1px solid var(--border);}
.cin-inner{
  position:relative;z-index:2;display:flex;flex-direction:column;gap:28px;
  max-width:1240px;margin:0 auto;padding:0 clamp(18px,5vw,64px);
}
.cin-media{order:1;position:relative;}
.cin-copy{order:2;}

/* ---------- animated background of each scene ---------- */
.cin-sbg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;contain:paint;}
.cin-orb{position:absolute;border-radius:50%;will-change:transform;width:90vmin;height:90vmin;}
.cin-orb.o1{left:-18vmin;top:-26vmin;background:radial-gradient(closest-side,rgba(var(--sc-rgb),.30),transparent 70%);}
.cin-orb.o2{right:-22vmin;bottom:-32vmin;background:radial-gradient(closest-side,rgba(242,184,76,.14),transparent 70%);}
[data-theme="light"] .cin-orb.o1{background:radial-gradient(closest-side,rgba(var(--sc-rgb),.20),transparent 70%);}
[data-theme="light"] .cin-orb.o2{background:radial-gradient(closest-side,rgba(242,184,76,.12),transparent 70%);}
.cin-ghost{
  position:absolute;right:2%;bottom:-6%;font-family:var(--font-display);font-weight:800;line-height:.78;
  font-size:clamp(150px,34vw,300px);letter-spacing:-.05em;color:transparent;user-select:none;
  -webkit-text-stroke:1px rgba(var(--sc-rgb),.20);will-change:transform;
}

/* ---------- glass copy card ---------- */
.cin-card{
  position:relative;padding:clamp(22px,3.2vw,40px);border-radius:26px;overflow:hidden;
  background:color-mix(in srgb,var(--surface) 58%,transparent);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);
  border:1px solid color-mix(in srgb,var(--sc) 26%,var(--border));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 34px 90px -36px rgba(var(--sc-rgb),.55);
}
[data-theme="light"] .cin-card{background:color-mix(in srgb,#fff 66%,transparent);box-shadow:inset 0 1px 0 #fff,0 30px 70px -36px rgba(var(--sc-rgb),.45);}
.cin-card::before{ /* pointer-reactive light */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(var(--sc-rgb),.16),transparent 62%);
}
.cin-scene.is-active .cin-card:hover::before{opacity:1;}

.cin-meta{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;margin-bottom:clamp(10px,1.8vh,18px);}
.cin-idx{font-family:var(--font-mono);font-size:12px;letter-spacing:.18em;color:var(--sc);display:inline-flex;align-items:baseline;gap:6px;}
.cin-idx b{font-size:20px;letter-spacing:.04em;font-weight:600;}
.cin-idx span{color:var(--text-faint);}
.cin-cat{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);
  padding:5px 12px;border-radius:100px;border:1px solid var(--border);background:color-mix(in srgb,var(--surface) 60%,transparent);
}
.cin-title{
  font-family:var(--font-display);font-weight:700;letter-spacing:-.025em;line-height:1.08;color:var(--text);
  font-size:clamp(28px,6.4vw,44px);margin:0;
}
.cin-w{display:inline-block;overflow:hidden;vertical-align:top;padding:.08em .03em .14em;margin:-.08em -.03em -.14em;}
.cin-wi{display:inline-block;will-change:transform;}
.cin-rule{display:block;height:2px;width:64px;margin:clamp(12px,2vh,20px) 0;border-radius:2px;transform-origin:0 50%;
  background:linear-gradient(90deg,var(--sc),transparent);box-shadow:0 0 16px var(--sc);}
.cin-desc{color:var(--text-muted);line-height:1.65;font-size:clamp(14.5px,2vw,16.5px);margin:0;max-width:60ch;}
.cin-techs{list-style:none;margin:clamp(14px,2.2vh,22px) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px;}
.cin-techs .tech-pill{border-color:color-mix(in srgb,var(--sc) 24%,var(--border));background:color-mix(in srgb,var(--sc) 7%,var(--surface-2));}
.cin-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(16px,2.6vh,28px);}
.cin-scene .btn-primary{background:var(--sc);border-color:var(--sc);color:#06080c;box-shadow:0 10px 34px -10px rgba(var(--sc-rgb),.8);}
.cin-scene .btn-primary:hover{box-shadow:0 14px 44px -8px rgba(var(--sc-rgb),.95);filter:brightness(1.06);}
.cin-scene .btn-ghost:hover{border-color:var(--sc);color:var(--text);}

/* ---------- media: glass frame with depth layers ---------- */
.cin-halo{position:absolute;inset:-12% -8%;border-radius:50%;pointer-events:none;will-change:transform;
  background:radial-gradient(closest-side,rgba(var(--sc-rgb),.34),transparent 72%);}
.cin-tilt{position:relative;transform-style:preserve-3d;will-change:transform;}
.cin-frame{
  position:relative;width:100%;aspect-ratio:1586/992;border-radius:22px;overflow:hidden;cursor:pointer;
  background:linear-gradient(145deg,rgba(var(--sc-rgb),.22),var(--surface-2));
  border:1px solid color-mix(in srgb,var(--sc) 34%,var(--border-strong));
  box-shadow:0 40px 100px -40px rgba(var(--sc-rgb),.7),0 0 0 1px rgba(255,255,255,.04) inset;
}
.cin-img,.cin-glyph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  filter:blur(var(--blur,0px));will-change:transform;}
.cin-glyph{display:flex;align-items:center;justify-content:center;color:var(--sc);}
.cin-glyph svg{width:30%;height:auto;filter:drop-shadow(0 0 26px var(--sc));}
.cin-shine{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s;mix-blend-mode:soft-light;
  background:radial-gradient(340px circle at var(--sx,50%) var(--sy,30%),rgba(255,255,255,.38),transparent 62%);}
.cin-scene.is-active .cin-frame:hover .cin-shine{opacity:1;}
.cin-chip{
  position:absolute;z-index:3;display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:100px;pointer-events:none;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--text);will-change:transform;
  background:color-mix(in srgb,var(--surface) 62%,transparent);border:1px solid var(--border-strong);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
.cin-chip{display:none;}
.cin-chip.live{left:14px;top:14px;}
.cin-chip.sub{right:14px;bottom:14px;max-width:calc(100% - 28px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ---------- rail + hint (pinned layout only) ---------- */
.cin-rail,.cin-hint{display:none;}

/* ============================================================
   PINNED LAYOUT — one full-screen stage, every project a scene
   ============================================================ */
@media (min-width:960px) and (min-height:600px){
  .cin-stage{height:100vh;height:100svh;}
  .cin-scene{position:absolute;inset:0;padding:0;visibility:hidden;border-top:0;}
  .cin-inner{
    height:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center;
    gap:clamp(24px,4vw,72px);padding:clamp(72px,11vh,118px) clamp(56px,6vw,96px) clamp(36px,6vh,64px) clamp(28px,5vw,72px);
  }
  .cin-scene.flip .cin-copy{order:2;}
  .cin-scene.flip .cin-media{order:1;}
  .cin-copy{order:1;} .cin-media{order:2;}
  .cin-scene:not(.flip) .cin-copy{order:1;} .cin-scene:not(.flip) .cin-media{order:2;}
  .cin-chip{display:inline-flex;}
  .cin-card{padding:clamp(20px,3.6vh,40px) clamp(22px,2.6vw,40px);}
  .cin-title{font-size:clamp(26px,min(4vw,6.4vh),62px);}
  .cin-desc{font-size:clamp(13.5px,min(1.12vw,2.05vh),17px);line-height:1.6;}
  .cin-techs{margin-top:clamp(10px,1.8vh,20px);}
  .cin-actions{margin-top:clamp(12px,2.4vh,26px);}
  .cin-frame{width:min(100%,calc(60vh * 1.6));margin-inline:auto;}
  .cin-ghost{font-size:clamp(220px,36vw,540px);right:auto;left:50%;bottom:-10%;transform:translateX(-50%);}
  .cin-scene.flip .cin-ghost{left:auto;right:-2%;transform:none;}

  .cin-rail{
    display:flex;flex-direction:column;align-items:center;gap:12px;position:absolute;z-index:8;
    right:clamp(12px,1.8vw,28px);top:50%;transform:translateY(-50%);
  }
  .cin-arrow{
    width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--text-muted);cursor:pointer;
    background:color-mix(in srgb,var(--surface) 60%,transparent);border:1px solid var(--border);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:color .25s,border-color .25s,transform .25s var(--ease);
  }
  .cin-arrow:hover{color:var(--text);border-color:var(--accent);transform:scale(1.08);}
  .cin-arrow svg{width:15px;height:15px;}
  .cin-dots{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;position:relative;}
  .cin-dot{position:relative;width:26px;height:20px;display:grid;place-items:center;cursor:pointer;background:none;border:0;padding:0;}
  .cin-dot span{width:6px;height:6px;border-radius:50%;background:var(--text-faint);transition:transform .35s var(--ease),background .3s,box-shadow .3s;}
  .cin-dot:hover span{background:var(--text);transform:scale(1.5);}
  .cin-dot[aria-current="true"] span{background:var(--sc,var(--accent));transform:scale(1.9);box-shadow:0 0 14px var(--sc,var(--accent));}
  .cin-dot::after{
    content:attr(data-title);position:absolute;right:calc(100% + 10px);top:50%;transform:translate(8px,-50%);opacity:0;pointer-events:none;
    white-space:nowrap;font-size:12px;padding:6px 12px;border-radius:10px;color:var(--text);
    background:color-mix(in srgb,var(--surface) 82%,transparent);border:1px solid var(--border-strong);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:opacity .25s,transform .3s var(--ease);
  }
  .cin-dot:hover::after,.cin-dot:focus-visible::after{opacity:1;transform:translate(0,-50%);}
  .cin-track{position:absolute;right:calc(50% - .5px);top:0;bottom:0;width:1px;background:var(--border);z-index:-1;}
  .cin-track i{position:absolute;inset:0;transform-origin:50% 0;background:linear-gradient(var(--accent),var(--accent-2));}
  .cin-hint{
    display:flex;flex-direction:column;align-items:center;gap:8px;position:absolute;z-index:8;left:50%;bottom:clamp(14px,3vh,28px);
    transform:translateX(-50%);font-family:var(--font-mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--text-faint);
    pointer-events:none;
  }
  .cin-hint i{width:1px;height:34px;background:linear-gradient(var(--accent),transparent);animation:cin-hint 1.8s ease-in-out infinite;transform-origin:50% 0;}
  @keyframes cin-hint{0%{transform:scaleY(0);}50%{transform:scaleY(1);}100%{transform:scaleY(1);opacity:0;}}
}
@media (max-width:959px){
  .cin-scene:nth-child(even) .cin-card{margin-left:auto;}
}

.cin-hint{transition:opacity .45s;}
.cin-hint.off{opacity:0;}