/* ═══════════════════════════════════════════════════════════════
   EUWL Hub — Root Page: Cinematic Layout
   layout_structure 92 · Same warm studio design system.
   Full-viewport title sequence · Scrolling marquee ·
   Overlapping featured panel · Filmstrip · Staggered bento.
   Body class: body.cinematic
   ═══════════════════════════════════════════════════════════════ */

/* ── Page Shell — wider for bento, tight padding for hero bleed ─ */
body.cinematic .page-shell {
  max-width: 1400px;
  padding-top: 0;
}

/* ═══════════════════════════════════════════════════════════════
   1. CINEMA HERO — Full Viewport Title Sequence
   ═══════════════════════════════════════════════════════════════ */
.cinema-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - 56px);
  min-height: calc(100dvh - 56px);
  padding: 4rem 0 3rem;
  margin-bottom: 0;
  overflow: hidden;
}

/* Subtle radial glow behind title area */
.cinema-hero::before {
  content: '';
  position: absolute;
  top: 25%;
  left: -5%;
  width: 55%;
  height: 55%;
  background: radial-gradient(ellipse, rgba(29, 92, 166, 0.04) 0%, transparent 65%);
  pointer-events: none;
}

.cinema-hero__title-group {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  margin-bottom: 3rem;
}

.cinema-hero__title-word {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: var(--text);
}

.cinema-hero__title-word--euwl {
  font-size: clamp(6rem, 22vw, 16rem);
  align-self: flex-start;
}

.cinema-hero__rule {
  height: 1px;
  background: var(--accent);
  opacity: 0.25;
  margin: 0.5rem 0 0.6rem;
}

.cinema-hero__title-word--hub {
  font-size: clamp(4rem, 15vw, 11rem);
  font-style: italic;
  color: var(--accent);
  align-self: flex-end;
  padding-right: 8%;
  letter-spacing: -0.04em;
}

.cinema-hero__bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  position: relative;
  z-index: 1;
}

.cinema-hero__meta {
  max-width: 440px;
}

.cinema-hero__counter {
  font-family: var(--font-mono);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--text);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.cinema-hero__counter span {
  color: var(--text-tertiary);
  font-size: 0.6em;
  letter-spacing: 0.05em;
}

.cinema-hero__copy {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

.cinema-hero__copy strong {
  color: var(--text);
  font-weight: 600;
}

.cinema-hero__tag {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 0.6rem;
}

/* Scroll indicator */
.cinema-hero__scroll {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  padding-bottom: 1rem;
}

.cinema-hero__scroll-line {
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, var(--accent), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%, 100% { opacity: 0.3; transform: scaleY(0.6); transform-origin: top; }
  50% { opacity: 1; transform: scaleY(1); transform-origin: top; }
}

.cinema-hero__scroll-text {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  writing-mode: vertical-rl;
}

/* ═══════════════════════════════════════════════════════════════
   2. MARQUEE — Full-Bleed Scrolling Provider Ticker
   ═══════════════════════════════════════════════════════════════ */
.cinema-marquee {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  overflow: hidden;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 0.7rem 0;
  margin-bottom: 3rem;
  background: var(--bg-elevated);
}

.cinema-marquee__track {
  display: flex;
  gap: 3rem;
  width: max-content;
  animation: marqueeScroll 40s linear infinite;
}

@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.cinema-marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  white-space: nowrap;
  flex-shrink: 0;
}

.cinema-marquee__dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   3. CHAPTER NUMBERS — Giant Watermarks
   ═══════════════════════════════════════════════════════════════ */
.cinema-chapter {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(6rem, 14vw, 11rem);
  font-weight: 400;
  line-height: 1;
  color: var(--text);
  opacity: 0.045;
  letter-spacing: -0.04em;
  margin-bottom: -1.5rem;
  position: relative;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

/* ═══════════════════════════════════════════════════════════════
   4. FEATURED — Overlapping Text-on-Image Panel
   ═══════════════════════════════════════════════════════════════ */
.cinema-featured-section {
  position: relative;
  z-index: 1;
  margin-bottom: 3rem;
}

.cinema-featured {
  display: block;
  position: relative;
  min-height: 420px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  text-decoration: none;
  color: var(--text);
  background: var(--bg-inset);
  transition: box-shadow var(--transition-smooth), transform var(--transition-smooth);
}

.cinema-featured:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

.cinema-featured__image {
  position: absolute;
  inset: 0;
}

.cinema-featured__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.cinema-featured:hover .cinema-featured__image img {
  transform: scale(1.03);
}

/* Floating text card — overlaps image */
.cinema-featured__text {
  position: absolute;
  bottom: 2.5rem;
  left: 2.5rem;
  z-index: 2;
  background: var(--bg-elevated);
  max-width: 380px;
  padding: 2rem 2.2rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition-smooth);
}

.cinema-featured:hover .cinema-featured__text {
  box-shadow: var(--shadow-float);
}

.cinema-featured__badge {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-demo);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.8rem;
}

.cinema-featured__badge svg {
  width: 14px;
  height: 14px;
}

.cinema-featured__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 0.6rem;
}

.cinema-featured__desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 1rem;
}

.cinema-featured__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.cinema-featured__count {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text);
  padding: 0.35rem 0.6rem;
  background: var(--bg-inset);
  border-radius: var(--radius-sm);
}

.cinema-featured__arrow {
  font-size: 0.78rem;
  color: var(--accent);
  transition: gap 0.3s ease;
}

.cinema-featured:hover .cinema-featured__arrow::after {
  content: ' →';
  margin-left: 0.3rem;
}

/* ═══════════════════════════════════════════════════════════════
   5. FILMSTRIP — Horizontal Scrolling Demo Thumbnails
   ═══════════════════════════════════════════════════════════════ */
.cinema-filmstrip-section {
  margin-bottom: 3rem;
}

.cinema-filmstrip {
  position: relative;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0.75rem 0;
}

.cinema-filmstrip::-webkit-scrollbar {
  display: none;
}

/* Film perforation lines */
.cinema-filmstrip::before,
.cinema-filmstrip::after {
  content: '';
  display: block;
  height: 1px;
  background: repeating-linear-gradient(
    90deg,
    var(--border-strong) 0px,
    var(--border-strong) 4px,
    transparent 4px,
    transparent 16px
  );
}

.cinema-filmstrip::after {
  margin-top: 0.75rem;
}

.cinema-filmstrip__track {
  display: flex;
  gap: 0.5rem;
  padding: 0 2rem;
  min-width: max-content;
}

.cinema-filmstrip__frame {
  display: block;
  flex-shrink: 0;
  width: 150px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  opacity: 0.65;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.cinema-filmstrip__frame:hover {
  opacity: 1;
  transform: translateY(-2px);
}

.cinema-filmstrip__frame img {
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  display: block;
}

/* Fade edges */
.cinema-filmstrip-section .cinema-filmstrip-mask {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4rem;
  pointer-events: none;
  z-index: 2;
}

/* ═══════════════════════════════════════════════════════════════
   6. PROVIDERS — Staggered Editorial Grid
   ═══════════════════════════════════════════════════════════════ */
.cinema-providers {
  position: relative;
  z-index: 1;
  padding-top: 2rem;
  margin-bottom: 2rem;
}

.cinema-providers__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto;
  grid-template-areas:
    "claude   claude   claude   claude   claude   claude   claude   claude   openai   openai   openai   openai"
    "claude   claude   claude   claude   claude   claude   claude   claude   openai   openai   openai   openai"
    "gemini   gemini   gemini   zai      zai      zai      devin    devin    devin    openrt   openrt   openrt"
    "landing  landing  landing  landing  landing  landing  landing  landing  landing  landing  landing  landing";
  gap: 1rem;
}

/* ── Provider Bento Card ─────────────────────────────────────── */
.provider-bento {
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--text);
  position: relative;
  overflow: hidden;
  transition:
    box-shadow var(--transition-smooth),
    border-color var(--transition-smooth),
    transform var(--transition-smooth);
  contain-intrinsic-size: 0 180px;
  content-visibility: auto;
}

.provider-bento:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

/* Color accent line on top */
.provider-bento__accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--provider-color);
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.provider-bento:hover .provider-bento__accent {
  opacity: 1;
}

/* Large watermark index number */
.provider-bento__index {
  position: absolute;
  bottom: 0;
  right: 0.8rem;
  font-family: var(--font-display);
  font-size: 4.5rem;
  font-weight: 400;
  line-height: 1;
  color: var(--text);
  opacity: 0.04;
  pointer-events: none;
  user-select: none;
}

.provider-bento__inner {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  position: relative;
  z-index: 1;
}

.provider-bento__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
}

.provider-bento__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--provider-color);
  flex-shrink: 0;
}

.provider-bento__label {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.provider-bento__name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 0.4rem;
}

.provider-bento__desc {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-top: auto;
}

/* Tall cards (Claude, OpenAI, Landing) — bigger type, more padding */
.provider-bento--tall .provider-bento__inner {
  padding: 2.2rem 2rem;
}

.provider-bento--tall .provider-bento__name {
  font-size: clamp(1.8rem, 2.5vw, 2.4rem);
}

.provider-bento--tall .provider-bento__index {
  font-size: 6rem;
}

/* Wide card (Landing full-width row) */
.provider-bento--wide .provider-bento__inner {
  padding: 1.5rem 2rem;
  flex-direction: row;
  align-items: center;
  gap: 2rem;
}

.provider-bento--wide .provider-bento__desc {
  max-width: 480px;
}

.provider-bento--wide .provider-bento__badge {
  margin-bottom: 0;
}

/* Grid area assignments */
.provider-bento--claude   { grid-area: claude; }
.provider-bento--openai   { grid-area: openai; }
.provider-bento--gemini   { grid-area: gemini; }
.provider-bento--zai      { grid-area: zai; }
.provider-bento--devin    { grid-area: devin; }
.provider-bento--openrt   { grid-area: openrt; }
.provider-bento--landing  { grid-area: landing; }

/* ═══════════════════════════════════════════════════════════════
   7. SCROLL REVEAL ANIMATIONS
   ═══════════════════════════════════════════════════════════════ */

[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.7s cubic-bezier(0.25, 0.1, 0.25, 1),
    transform 0.7s cubic-bezier(0.25, 0.1, 0.25, 1);
}

[data-reveal="scale"] {
  transform: scale(0.98) translateY(16px);
}

[data-reveal="fade"] {
  transform: none;
}

[data-reveal].revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Stagger delays */
[data-reveal-delay="1"] { transition-delay: 0.06s; }
[data-reveal-delay="2"] { transition-delay: 0.12s; }
[data-reveal-delay="3"] { transition-delay: 0.18s; }
[data-reveal-delay="4"] { transition-delay: 0.24s; }
[data-reveal-delay="5"] { transition-delay: 0.30s; }
[data-reveal-delay="6"] { transition-delay: 0.36s; }
[data-reveal-delay="7"] { transition-delay: 0.42s; }

/* ── Hero Entrance ────────────────────────────────────────────── */
@keyframes heroTitleIn {
  from {
    opacity: 0;
    transform: translateY(50px);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes heroRuleIn {
  from {
    transform: scaleX(0);
    transform-origin: left;
  }
  to {
    transform: scaleX(1);
    transform-origin: left;
  }
}

@keyframes heroMetaIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cinema-hero__title-group {
  animation: heroTitleIn 1s cubic-bezier(0.25, 0.1, 0.25, 1) 0.15s both;
}

.cinema-hero__rule {
  animation: heroRuleIn 0.8s cubic-bezier(0.25, 0.1, 0.25, 1) 0.6s both;
}

.cinema-hero__bottom {
  animation: heroMetaIn 0.8s cubic-bezier(0.25, 0.1, 0.25, 1) 0.8s both;
}

.cinema-hero__scroll {
  animation: heroMetaIn 0.8s cubic-bezier(0.25, 0.1, 0.25, 1) 1s both;
}

/* ═══════════════════════════════════════════════════════════════
   8. RESPONSIVE: Tablet (≤1200 px)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
  .cinema-providers__grid {
    grid-template-columns: repeat(6, 1fr);
    grid-template-areas:
      "claude   claude   claude   claude   openai   openai"
      "claude   claude   claude   claude   openai   openai"
      "gemini   gemini   zai      zai      devin    devin"
      "landing  landing  landing  landing  openrt   openrt";
  }
}

/* ═══════════════════════════════════════════════════════════════
   9. RESPONSIVE: Tablet (≤1024 px)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .cinema-featured {
    min-height: 340px;
  }

  .cinema-featured__text {
    bottom: 1.5rem;
    left: 1.5rem;
    padding: 1.5rem;
    max-width: 340px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   10. RESPONSIVE: Mobile (≤768 px)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .cinema-hero {
    min-height: calc(85vh - 48px);
    justify-content: flex-end;
    padding: 2rem 0 2rem;
  }

  .cinema-hero__title-word--euwl {
    font-size: clamp(4.5rem, 20vw, 8rem);
  }

  .cinema-hero__title-word--hub {
    font-size: clamp(3rem, 15vw, 6rem);
    padding-right: 5%;
  }

  .cinema-hero__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }

  .cinema-hero__counter {
    font-size: clamp(2rem, 8vw, 3rem);
  }

  .cinema-hero__scroll {
    display: none;
  }

  .cinema-featured {
    min-height: 280px;
  }

  .cinema-featured__text {
    position: relative;
    bottom: auto;
    left: auto;
    max-width: none;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  }

  .cinema-providers__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "claude   claude"
      "claude   claude"
      "openai   openai"
      "openai   openai"
      "gemini   zai"
      "devin    openrt"
      "landing  landing";
    gap: 0.75rem;
  }

  .provider-bento__inner {
    padding: 1.1rem;
  }

  .provider-bento--tall .provider-bento__inner {
    padding: 1.4rem;
  }

  .provider-bento__name {
    font-size: 1.3rem;
  }

  .provider-bento--tall .provider-bento__name {
    font-size: 1.5rem;
  }

  .provider-bento--wide .provider-bento__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .cinema-chapter {
    font-size: clamp(4rem, 10vw, 6rem);
    margin-bottom: -1rem;
  }

  .cinema-marquee {
    margin-bottom: 2rem;
  }

  .cinema-filmstrip__frame {
    width: 120px;
  }

  body.cinematic .page-shell {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* ═══════════════════════════════════════════════════════════════
   11. RESPONSIVE: Small Mobile (≤480 px)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .cinema-providers__grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "claude"
      "claude"
      "openai"
      "openai"
      "gemini"
      "zai"
      "devin"
      "openrt"
      "landing";
    gap: 0.65rem;
  }

  .cinema-featured__title {
    font-size: 1.6rem;
  }

  .cinema-featured__desc {
    font-size: 0.84rem;
  }

  .cinema-filmstrip__frame {
    width: 100px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   12. PREFERS REDUCED MOTION
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .cinema-hero__title-group,
  .cinema-hero__rule,
  .cinema-hero__bottom,
  .cinema-hero__scroll {
    animation: none !important;
  }

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .cinema-hero__scroll-line {
    animation: none !important;
  }

  .cinema-marquee__track {
    animation: none !important;
  }
}