/* Olam intro reels — shared design system. Spec: ../frame.md */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  width: 1080px;
  height: 1920px;
  overflow: hidden;
  background: #f3eee4;
}
#root {
  position: relative;
  width: 1080px;
  height: 1920px;
  overflow: hidden;
  background: #f3eee4;
  --cream: #f3eee4;
  --ink: #1a1712;
  --teak-deep: #4c2e1a;
  --gold: #bca36d;
  --green-deep: #454736;
}
.clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--cream);
}

/* ---- type ---- */
.kicker {
  position: absolute;
  left: 72px;
  top: 262px;
  font-family: Montserrat, sans-serif;
  font-weight: 400;
  font-size: 30px;
  letter-spacing: 0.34em;
  color: var(--teak-deep);
  opacity: 0;
}
.line {
  position: absolute;
  left: 72px;
  width: 936px;
  top: 1210px;
  font-family: Montserrat, sans-serif;
  font-weight: 400;
  font-size: 96px;
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.line span {
  display: block;
  opacity: 0;
}
.line .heavy {
  font-weight: 900;
}
.mono {
  position: absolute;
  left: 72px;
  width: 936px;
  top: 1452px;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 400;
  font-size: 34px;
  letter-spacing: 0.02em;
  color: var(--teak-deep);
  opacity: 0;
}

/* ---- the window card ---- */
.card {
  position: absolute;
  left: 72px;
  top: 300px;
  width: 936px;
  height: 820px;
  overflow: hidden;
  border: 2px solid var(--gold);
  background: var(--green-deep);
}
.card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}

/* ---- full-bleed establishing shot ---- */
.bleed img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}
.scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(26, 23, 18, 0.82) 0px,
    rgba(26, 23, 18, 0.58) 620px,
    rgba(26, 23, 18, 0) 1060px
  );
}
.bleed .line {
  color: var(--cream);
}
.bleed .mono {
  color: var(--cream);
}

/* ---- ripple ---- */
.ripple {
  position: absolute;
  inset: 0;
}
.ripple circle {
  fill: none;
  stroke: var(--gold);
  stroke-width: 3;
}
.mark {
  position: absolute;
  left: 340px;
  top: 760px;
  width: 400px;
  height: 406px;
  opacity: 0;
  will-change: transform;
}
.wordmark {
  position: absolute;
  left: 240px;
  top: 656px;
  width: 600px;
  height: 207px;
  opacity: 0;
}
.rule {
  position: absolute;
  left: 480px;
  top: 1186px;
  width: 120px;
  height: 2px;
  background: var(--gold);
  transform-origin: 50% 50%;
  transform: scaleX(0);
}
.tagline {
  position: absolute;
  left: 130px;
  width: 820px;
  top: 1258px;
  text-align: center;
  font-family: Montserrat, sans-serif;
  font-weight: 400;
  font-size: 56px;
  line-height: 1.28;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.tagline span {
  display: block;
  opacity: 0;
}
.handle {
  position: absolute;
  left: 130px;
  width: 820px;
  top: 1436px;
  text-align: center;
  font-family: "IBM Plex Mono", monospace;
  font-size: 34px;
  letter-spacing: 0.06em;
  color: var(--teak-deep);
  opacity: 0;
}

/* ---- reel title card (weight 900 lives here, and only here) ---- */
.title {
  position: absolute;
  left: 72px;
  width: 936px;
  top: 812px;
  font-family: Montserrat, sans-serif;
  font-weight: 900;
  font-size: 118px;
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.title span {
  display: block;
  opacity: 0;
}
.mono span {
  display: block;
  opacity: 0;
}
.mono.stack {
  line-height: 1.5;
}

/* ============================================================
   Reel 4 — "Nine windows": one grid, one camera diving through it
   ============================================================ */
.zoom-outer {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  will-change: transform;
}
.zoom-inner {
  position: absolute;
  inset: 0;
  will-change: transform;
}
.grid9 {
  position: absolute;
  left: 76px;
  top: 496px;
  display: grid;
  grid-template-columns: repeat(3, 296px);
  grid-auto-rows: 296px;
  gap: 20px;
}
.tile {
  position: relative;
  overflow: hidden;
  border: 2px solid var(--gold);
  background: var(--green-deep);
}
.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================
   Reel 5 — "Down through the house": one tall world, one camera
   ============================================================ */
.world {
  position: absolute;
  left: 0;
  top: 0;
  width: 1080px;
  transform-origin: 50% 0%;
  will-change: transform;
}
.panel {
  position: relative;
  width: 1080px;
  height: 900px;
  overflow: hidden;
  background: var(--green-deep);
}
.panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.band {
  position: relative;
  width: 1080px;
  height: 320px;
  display: flex;
  align-items: center;
  padding: 0 72px;
  background: var(--cream);
  font-family: Montserrat, sans-serif;
  font-weight: 400;
  font-size: 76px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.progress {
  position: absolute;
  right: 40px;
  top: 300px;
  width: 3px;
  height: 1320px;
  background: rgba(188, 163, 109, 0.28);
}
.progress i {
  position: absolute;
  inset: 0;
  display: block;
  background: var(--gold);
  transform-origin: 50% 0%;
  transform: scaleY(0);
}

/* ============================================================
   Reel 6 — "Teak, brass, granite, green": material study, hard cuts
   ============================================================ */
.macro {
  position: absolute;
  left: 0;
  top: 200px;
  width: 1080px;
  height: 1080px;
  overflow: hidden;
  background: var(--green-deep);
}
.macro img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: 50% 50%;
  will-change: transform;
}
.material {
  position: absolute;
  left: 72px;
  width: 936px;
  top: 1336px;
  font-family: Montserrat, sans-serif;
  font-weight: 400;
  font-size: 112px;
  letter-spacing: 0.24em;
  color: var(--ink);
  opacity: 0;
}
.material-note {
  position: absolute;
  left: 76px;
  width: 936px;
  top: 1462px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 32px;
  letter-spacing: 0.02em;
  color: var(--teak-deep);
  opacity: 0;
}

/* ============================================================
   Reel 7 — "The whole house, fast": filmstrip, cut on the pulse
   ============================================================ */
.strip {
  position: absolute;
  left: 0;
  top: 300px;
  width: 1080px;
  height: 1200px;
  overflow: hidden;
  background: var(--green-deep);
}
.strip img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}
.counter {
  position: absolute;
  left: 72px;
  top: 228px;
  height: 40px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 32px;
  letter-spacing: 0.08em;
  color: var(--teak-deep);
}
.strip-label {
  position: absolute;
  right: 72px;
  top: 196px;
  text-align: right;
  font-family: Montserrat, sans-serif;
  font-weight: 400;
  font-size: 58px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.strip-label span,
.counter span {
  position: absolute;
  right: 0;
  top: 0;
  white-space: nowrap;
  opacity: 0;
}
.counter span {
  right: auto;
  left: 0;
}