/* The title card and the desk beside it.
   Layout and the name's treatment come from the Codex build; the light, the load-in and the
   status pills are the product's own. Everything below the hero lives in style.css. */

.hero { width: 92%; max-width: 1480px; margin: 0 auto 65px; display: flex; flex-direction: column; }

/* ─── the headline ─── */
.hero-heading { text-align: center; max-width: 1000px; margin: 46px auto 30px; }
.hero-heading > p { margin: 0 0 16px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--rt-yellow); }
.hero-heading h1 { margin: 0 0 19px; font-size: clamp(32px, 3.8vw, 58px); font-weight: 500; letter-spacing: -.055em; line-height: 1.08; }
.hero-heading h1 em { font-style: normal; color: var(--rt-yellow); }
.hero-heading > div { font-size: 16px; line-height: 1.7; color: var(--ink-2); }

/* ─── the slide and the desk, side by side ─── */
.hero-layout { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 28px; align-items: start; }
.slide-column { min-width: 0; }
.slide {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 6px;
  border: 1px solid #393128; background: #070605; isolation: isolate;
  /* the title card's light spills past its edge, so the desk beside it is a pane over the glow */
  box-shadow: 0 30px 90px rgba(0, 0, 0, .4), 0 0 140px -20px rgba(236, 70, 40, .42), 60px 20px 160px -40px rgba(210, 46, 86, .3);
}
.slide:focus-visible { outline: 1px solid var(--rt-yellow); outline-offset: 4px; }
.slide canvas, .slide .poster { position: absolute; inset: 0; width: 100%; height: 100%; }
.slide .poster { object-fit: cover; }
/* the bars are drawn on black and screened onto the room, so the room's light shows through */
#bars { mix-blend-mode: screen; }
.slide.overbrick { cursor: pointer; }

/* the name: Akira outlines as SVG, so the shadow is real and the letters can move one at a time.
   The mask is the load-in: a sweep from left to right, driven from hero.js as --sweep. */
#wordmark {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none;
  -webkit-mask-image: linear-gradient(100deg, #000 0 42%, rgba(0, 0, 0, .35) 52%, transparent 60%);
  mask-image: linear-gradient(100deg, #000 0 42%, rgba(0, 0, 0, .35) 52%, transparent 60%);
  -webkit-mask-size: 260% 100%; mask-size: 260% 100%;
  -webkit-mask-position: var(--sweep, 0%) 0; mask-position: var(--sweep, 0%) 0;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
#wordmark text { font-synthesis: weight; }

.corner {
  position: absolute; z-index: 3; left: 5%; top: 7%; font-size: 10px; letter-spacing: .15em;
  text-transform: uppercase; color: #a39b8b; pointer-events: none; opacity: 0; transition: opacity .5s;
}
.ready .corner { opacity: 1; }

/* the state colours doing their job, at the top of the frame */
.pills { position: absolute; z-index: 3; right: 4%; top: 6%; display: flex; align-items: center; gap: 8px; opacity: 0; transition: opacity .5s .15s; }
.ready .pills { opacity: 1; }
.pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: #06120f; white-space: nowrap; }
.pill.live { background: var(--rt-face-live); box-shadow: var(--rt-glow-live); }
.pill.live i { width: 6px; height: 6px; border-radius: 50%; background: #06120f; animation: rt-breathe 1.6s ease-in-out infinite; }
.pill.ok { background: var(--rt-face-ok); box-shadow: var(--rt-glow-ok); }

/* ─── the desk: the editor's own DialKit, then the way in ─── */
.desk { min-width: 0; display: flex; flex-direction: column; }
#dials { border-radius: 14px; overflow: visible; }
#dials .dialkit-panel-inner { background: var(--glass-pane); backdrop-filter: var(--glass-pane-blur); -webkit-backdrop-filter: var(--glass-pane-blur); border-color: transparent; box-shadow: var(--glass-rim), var(--glass-lift); }
#dials .dialkit-root {
  --dial-glass-bg: #161411; --dial-surface: #ffffff09; --dial-text-label: #ccc5b9; --dial-accent: #f5ce6e;
  --dial-text-primary: #eee7da; --dial-focus-ring: #f5ce6e; --dial-row-height: 32px; --dial-row-gap: 4px;
}
#dials .dialkit-preset-manager, #dials .dialkit-panel-toolbar { display: none; }
.reset { align-self: center; margin: 7px 0 0; padding: 9px 0; border: 0; background: none; color: var(--muted); font-size: 11px; cursor: pointer; }
.reset:hover { color: var(--ink-2); }
.hero-cta { display: flex; flex-direction: column; align-items: center; margin: 10px 5px 0; }
.hero-cta .button { width: 100%; min-width: 0; min-height: 48px; padding: 14px 16px; font-size: 15px; }
.hero-cta > p { margin: 12px 0 0; font-size: 11px; color: var(--muted); }

.scroll-invitation { display: flex; justify-content: space-between; gap: 25px; border-top: 1px solid var(--rule); padding: 20px 0; margin-top: 28px; font-size: 13px; color: var(--muted); }
.scroll-invitation span:first-child { color: var(--ink-2); }

/* ─── the other person: a badge that opens into what she said, and closes again ─── */
#cursor {
  position: absolute; left: 86%; top: 82%; z-index: 4; display: flex; align-items: center;
  width: 36px; height: 36px; overflow: hidden; border-radius: 18px 18px 18px 6px;
  background: rgba(30, 20, 40, var(--bubble-fill, 0)); box-shadow: 0 2px 12px rgba(0, 0, 0, .13);
  transform-origin: 18px 18px; opacity: 0; pointer-events: none; will-change: transform, width, left, top;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
#cursor .cursor-avatar {
  flex: 0 0 36px; height: 36px; display: grid; place-items: center; border-radius: 50% 50% 50% 6px;
  background: var(--rt-note); color: #24123e; font-size: 13px; font-weight: 700; font-style: normal;
  box-shadow: inset 0 0 0 1px rgba(222, 200, 255, .53), 0 0 8px rgba(167, 119, 237, .2);
}
#cursor .cursor-message { display: flex; align-items: center; gap: 7px; flex: none; padding: 0 12px 0 10px; font-size: 12px; color: #dfd7e7; opacity: var(--message-opacity, 0); white-space: nowrap; }
#cursor .cursor-message strong { font-weight: 600; color: #f3edf9; }
#cursor .cursor-message i { font-style: normal; color: #a99ab8; }

/* ─── widths ─── */
@media (min-width: 1500px) {
  .hero-layout { grid-template-columns: minmax(0, 1fr) 285px; gap: 35px; }
  .slide { aspect-ratio: 16 / 9; }
}
@media (max-width: 1000px) and (min-width: 761px) {
  .hero-layout { grid-template-columns: minmax(0, 1fr) 235px; gap: 20px; }
  .hero-heading { margin-top: 35px; }
  .hero-heading h1 { font-size: 39px; }
}
@media (max-width: 760px) {
  .hero-heading { margin: 32px auto 25px; }
  .hero-heading h1 { font-size: 35px; line-height: 1.12; }
  .hero-heading h1 em { white-space: nowrap; }
  .hero-heading > p { font-size: 10px; }
  .hero-heading > div { font-size: 14px; }
  .hero-heading > div br { display: none; }
  .hero-layout { grid-template-columns: 1fr; gap: 20px; }
  .slide { aspect-ratio: 16 / 11; }
  .corner { font-size: 7px; top: 8%; }
  .pills { gap: 5px; }
  .pill { font-size: 10px; padding: 4px 8px; }
  .desk { max-width: 480px; width: 100%; margin: auto; }
  .hero-cta { margin-top: 23px; }
  .scroll-invitation { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  #wordmark { -webkit-mask-image: none; mask-image: none; }
}