/* Ivaraa Studio — scene styles, lifted from the reel compositions (ivaraa/reel/compositions/*.html).
   All sizes are design px: each stage is laid out at W x H design px and scaled to the viewport. */

.sc { position: absolute; inset: 0; overflow: hidden; background: var(--ink); color: var(--cream); font-family: var(--f-body); }
.sc * { box-sizing: border-box; }

/* ---------- 01 drop ---------- */
#s01-root { background: transparent; }
#s01-cam { position: absolute; inset: 0; will-change: transform; }
#s01-glow { position: absolute; left: 0; top: 0; width: 1400px; height: 1400px; margin: -700px 0 0 -700px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,90,31,.20) 0%, rgba(255,90,31,.06) 35%, rgba(255,90,31,0) 65%); opacity: 0; }
#s01-floor { position: absolute; left: 0; top: 0; height: 2px; width: 100%; transform-origin: 50% 50%;
  background: linear-gradient(90deg, rgba(42,36,30,0) 0%, #3a3128 30%, #FF5A1F 50%, #3a3128 70%, rgba(42,36,30,0) 100%); opacity: 0; }
#s01-ripple { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.s01-word { position: absolute; left: 0; top: 0; overflow: hidden; line-height: 1; white-space: nowrap; padding: 0.06em 0.02em 0.26em; margin: -0.06em 0 0 -0.02em;
  font-family: var(--f-display); font-weight: 800; letter-spacing: -0.03em; color: var(--cream); }
.s01-ch { display: inline-block; }
#s01-flat { position: absolute; inset: 0; background: var(--ember); opacity: 0; }

/* ---------- 02 services ---------- */
#s02-root { background: var(--ember); }
.s02-card { position: absolute; inset: 0; opacity: 0; contain: strict; }
.s02-line { position: absolute; left: 0; top: 0; white-space: nowrap; line-height: 1; font-family: var(--f-display); font-weight: 800; letter-spacing: -0.03em; }
.s02-mask { overflow: hidden; padding: 0.04em 0.03em 0.26em; margin: -0.04em 0 0 -0.03em; }
.s02-ch { display: inline-block; }
.s02-label { position: absolute; font-family: var(--f-mono); font-size: 18px; letter-spacing: .14em; white-space: pre; }
.s02-bar { position: absolute; height: 14px; background: var(--ember); transform-origin: 0 50%; }
.s02-glow { position: absolute; left: 0; top: 0; width: 1600px; height: 1600px; margin: -800px 0 0 -800px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,90,31,.16), rgba(255,90,31,0) 62%); }

/* ---------- 03 product UI ---------- */
#s03-bgglow { position: absolute; left: 50%; top: 58%; width: 2000px; height: 1300px; margin: -650px 0 0 -1000px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,90,31,.17), rgba(139,124,255,.05) 40%, rgba(0,0,0,0) 68%); }
#s03-gridbg { position: absolute; inset: 0; opacity: .5;
  background-image: linear-gradient(rgba(42,36,30,.55) 1px, transparent 1px), linear-gradient(90deg, rgba(42,36,30,.55) 1px, transparent 1px);
  background-size: 80px 80px; -webkit-mask-image: radial-gradient(ellipse at 50% 55%, #000 10%, transparent 70%); mask-image: radial-gradient(ellipse at 50% 55%, #000 10%, transparent 70%); }
#s03-cam, #s03-drift { position: absolute; inset: 0; }
#s03-drift { will-change: transform; }
#s03-cam { will-change: transform; }
#s03-head { position: absolute; inset: 0; }
.s03-hline { position: absolute; white-space: nowrap; line-height: 1; font-family: var(--f-display); font-weight: 800; letter-spacing: -0.03em; color: var(--cream); }
.s03-hmask { overflow: hidden; padding: 0.04em 0.02em 0.22em; margin: -0.04em 0 -0.22em -0.02em; }
.s03-hw { display: inline-block; }
#s03-panel { position: absolute; left: 0; top: 0; background: #17130F; border: 1px solid #2A241E; border-radius: 22px; overflow: hidden;
  box-shadow: 0 60px 140px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.03) inset; transform-origin: 50% 50%; font-family: var(--f-body); color: var(--cream); }
.s03-abs { position: absolute; }
.s03-card { position: absolute; background: #1D1814; border: 1px solid #2A241E; border-radius: 16px; overflow: hidden; }
.s03-k { font-family: var(--f-mono); font-size: 13px; letter-spacing: .12em; color: #9A8F84; text-transform: uppercase; white-space: nowrap; }
.s03-nav { position: absolute; font-size: 18px; color: #9A8F84; display: flex; align-items: center; gap: 14px; }
.s03-nav i { display: block; width: 16px; height: 16px; border-radius: 4px; border: 2px solid #4a4038; }
#s03-pill { position: absolute; background: #2A241E; border-radius: 12px; }
#s03-btn { position: absolute; border-radius: 14px; border: 2px solid #FF5A1F; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 19px; color: #FF5A1F; overflow: hidden; }
#s03-btnfill { position: absolute; inset: 0; background: #FF5A1F; transform-origin: 0 50%; }
#s03-btnlab, #s03-btnlab2 { position: relative; }
#s03-btnlab2 { position: absolute; color: #0B0A09; }
.s03-callout { position: absolute; left: 0; top: 0; padding: 16px 24px; background: rgba(23,19,15,.92); border: 1px solid #3a3128; border-radius: 999px;
  font-weight: 700; font-size: 25px; white-space: nowrap; color: #F4EDE4; display: flex; align-items: center; gap: 14px; box-shadow: 0 20px 50px rgba(0,0,0,.5); line-height: 1.2; }
.s03-callout b { display: block; width: 12px; height: 12px; border-radius: 3px; background: #8B7CFF; transform: rotate(45deg); flex: none; }
.s03-lead { position: absolute; left: 0; top: 0; height: 2px; background: linear-gradient(90deg, rgba(139,124,255,.9), rgba(244,237,228,.25)); transform-origin: 0 50%; }
.s03-anchor { position: absolute; left: 0; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 2px solid #8B7CFF; }
#s03-toast { position: absolute; display: flex; align-items: center; gap: 14px; padding: 0 22px; background: #241D17; border: 1px solid #3a3128; border-radius: 14px; font-size: 18px; box-shadow: 0 18px 40px rgba(0,0,0,.45); }
#s03-toast .ok { width: 26px; height: 26px; border-radius: 50%; background: #8B7CFF; display: flex; align-items: center; justify-content: center; }
#s03-click { position: absolute; left: 0; top: 0; width: 80px; height: 80px; margin: -40px 0 0 -40px; border-radius: 50%; border: 2px solid #FFB03A; opacity: 0; }

/* ---------- 04 data ---------- */
#s04-root { background: #1D1814; }
#s04-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 75% 85%, rgba(255,90,31,.12), rgba(0,0,0,0) 55%), radial-gradient(ellipse at 20% 10%, rgba(139,124,255,.07), rgba(0,0,0,0) 50%); }
#s04-cam { position: absolute; inset: 0; will-change: transform; }
.s04-abs { position: absolute; left: 0; top: 0; }
.s04-k { font-family: var(--f-mono); font-size: 13px; letter-spacing: .12em; color: #9A8F84; text-transform: uppercase; white-space: nowrap; transform-origin: 0 0; }
.s04-bar { position: absolute; left: 0; top: 0; border-radius: 6px; background: linear-gradient(180deg, #4a3f86, #2f2856); transform-origin: 0 100%; }
.s04-grid { position: absolute; left: 0; top: 0; height: 1px; background: #2A241E; transform-origin: 0 50%; }
.s04-head { position: absolute; font-family: var(--f-display); font-weight: 800; letter-spacing: -0.03em; line-height: .98; white-space: nowrap; color: var(--cream); }
.s04-mask { overflow: hidden; padding: 0.04em 0.02em 0.2em; margin: -0.04em 0 -0.2em -0.02em; }
.s04-w { display: inline-block; }
#s04-count { font-family: var(--f-display); font-weight: 800; letter-spacing: -0.03em; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--cream); }
#s04-badge { display: flex; align-items: center; gap: 10px; padding: 12px 22px; border: 2px solid #8B7CFF; border-radius: 999px; font-family: var(--f-body); font-weight: 700; font-size: 30px; color: #F4EDE4; white-space: nowrap; background: rgba(139,124,255,.12); }

/* ---------- 05 depth ---------- */
#s05-whip { position: absolute; inset: 0; will-change: transform; }
#s05-cv { position: absolute; left: 0; top: 0; }
#s05-flash { position: absolute; left: 0; top: 0; width: 1600px; height: 1600px; margin: -800px 0 0 -800px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,236,210,.95) 0%, rgba(255,176,58,.6) 12%, rgba(255,90,31,.25) 30%, rgba(255,90,31,0) 60%); opacity: 0; }
.s05-lab { position: absolute; left: 0; top: 0; white-space: nowrap; }
.s05-lab .k { font-family: var(--f-mono); font-size: 15px; letter-spacing: .14em; color: #9A8F84; }
.s05-lab .n { font-family: var(--f-display); font-weight: 800; font-size: 52px; letter-spacing: -0.02em; line-height: 1.05; }
.s05-lead { position: absolute; left: 0; top: 0; height: 1.5px; background: rgba(244,237,228,.45); transform-origin: 0 50%; }
.s05-head { position: absolute; left: 0; top: 0; font-family: var(--f-display); font-weight: 800; letter-spacing: -0.03em; line-height: 0.98; white-space: nowrap; }
.s05-mask { overflow: hidden; padding: 0.04em 0.02em 0.2em; margin: -0.04em 0 -0.2em -0.02em; }
.s05-w { display: inline-block; }

/* ---------- 06 brand motion ---------- */
#s06-whip, #s06-iris { position: absolute; inset: 0; }
#s06-whip { will-change: transform; }
#s06-gl { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: opacity .6s; }
#s06-fallback { position: absolute; inset: 0; overflow: hidden;
  background: radial-gradient(60% 50% at 28% 72%, rgba(255,90,31,.42), rgba(255,90,31,0) 70%), radial-gradient(50% 40% at 78% 26%, rgba(255,176,58,.22), rgba(255,176,58,0) 70%), radial-gradient(40% 40% at 60% 80%, rgba(139,124,255,.10), rgba(0,0,0,0) 70%), #0B0A09; }
#s06-fallback::after { content: ""; position: absolute; inset: -20%; background: radial-gradient(35% 30% at 40% 60%, rgba(255,90,31,.28), rgba(255,90,31,0) 70%); animation: s06drift 14s ease-in-out infinite alternate; }
@keyframes s06drift { to { transform: translate(12%, -8%) scale(1.15); } }
#s06-cv { position: absolute; left: 0; top: 0; }
.s06-head { position: absolute; left: 0; top: 0; width: 100%; text-align: center; font-family: var(--f-display); font-weight: 800; letter-spacing: -0.03em; line-height: 1; white-space: nowrap; }
.s06-mask { overflow: hidden; padding: 0.04em 0 0.22em; }
.s06-w { display: inline-block; }
.s06-k { position: absolute; left: 0; top: 0; width: 100%; text-align: center; font-family: var(--f-mono); font-size: 18px; letter-spacing: .2em; color: #9A8F84; }
.s06-iring { position: absolute; left: 0; top: 0; border-radius: 50%; border: 3px solid #FFB03A; box-shadow: 0 0 30px rgba(255,90,31,.8), inset 0 0 30px rgba(255,90,31,.6); opacity: 0; pointer-events: none; }

/* ---------- 07 logo ---------- */
#s07-cam { position: absolute; inset: 0; }
#s07-bloom { position: absolute; left: 0; top: 0; width: 1800px; height: 1100px; margin: -550px 0 0 -900px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,90,31,.26) 0%, rgba(255,90,31,.08) 38%, rgba(255,90,31,0) 66%); opacity: 0; }
#s07-svg { position: absolute; left: 0; top: 0; overflow: visible; }
.s07-url { position: absolute; left: 0; top: 0; width: 100%; text-align: center; font-family: var(--f-mono); letter-spacing: .22em; color: #F4EDE4; white-space: nowrap; }
.s07-tag { position: absolute; left: 0; top: 0; width: 100%; text-align: center; font-family: var(--f-body); font-weight: 400; letter-spacing: -0.01em; color: #9A8F84; white-space: nowrap; }

/* ---------- 06b offer ---------- */
#s065-glow { position: absolute; left: 0; top: 0; width: 1500px; height: 1500px; margin: -750px 0 0 -750px; border-radius: 50%; background: radial-gradient(circle, rgba(255,90,31,.16) 0%, rgba(255,90,31,.05) 38%, rgba(255,90,31,0) 66%); opacity: 0; }
.s065-row { position: absolute; left: 0; top: 0; }
.s065-mask { overflow: hidden; padding: 0.04em 0.03em 0.24em; margin: -0.04em 0 0 -0.03em; white-space: nowrap; line-height: 1; font-family: var(--f-display); font-weight: 800; letter-spacing: -0.03em; }
.s065-w { display: inline-block; }
.s065-em { color: var(--ember); }
.s065-k { position: absolute; font-family: var(--f-mono); font-size: 18px; letter-spacing: .14em; color: #9A8F84; white-space: nowrap; }
.s065-n { position: absolute; font-family: var(--f-mono); letter-spacing: .12em; color: #9A8F84; white-space: nowrap; }
#s01-disc { position: absolute; left: 0; top: 0; border-radius: 50%; background: radial-gradient(circle at 42% 40%, #FFCB80 0%, #FFB03A 40%, #FF5A1F 100%); opacity: 0; }