/* ========== CHANEL PRIVATE PAGE STYLES ========== */

    /* These pages used to run their own pairing (Syne + DM Sans) apart from
       the rest of the site. Now on the same Oswald + Inter Tight files
       index.html uses, self-hosted for the same reason — replacing the
       fonts.googleapis.com / fonts.gstatic.com round trip both watch pages
       made. Google served every requested weight as an identical URL
       pointing at one variable-font file, so one download per family
       covers the whole weight range — declared here as a range rather
       than as separate per-weight blocks.

       Oswald's variable axis tops out at 700 (checked against the actual
       file), so .lock-title's font-weight: 800 clamps to 700 — the
       heaviest weight the font has rather than an exact match. Visually
       negligible at that size; not worth a synthetic-bold workaround. */
    @font-face {
      font-family: 'Oswald';
      font-style: normal;
      font-weight: 200 700;
      font-display: swap;
      src: url('/assets/fonts/oswald-variable.woff2') format('woff2');
    }

    @font-face {
      font-family: 'Inter Tight';
      font-style: normal;
      font-weight: 200 700;
      font-display: swap;
      src: url('/assets/fonts/inter-tight-variable.woff2') format('woff2');
    }

    /* ── Webflow base rules the watch pages used to inherit ───────────────
       video.html and exclusive.html previously loaded the full 110KB
       style.css. They use none of its class selectors — but they did depend
       on its bare-element base layer (the Webflow body/p/img rules and the
       normalize block). Those pages now skip style.css entirely, so the
       handful of rules they actually relied on are reproduced verbatim here.

       These are copied to preserve the pages' existing rendering exactly,
       not because the values are ideal — see the note on `p` below. */
    :root { --orange: #ff3c00; }

    /* Webflow's body rule set these two; everything on both pages inherits
       them, so the pages render uppercase and semibold by default. */
    body.watch, body.chanel {
      text-transform: uppercase;
      font-weight: 500;
    }

    /* normalize.css: without this, form controls fall back to the UA's
       13.33px / normal-line-height defaults instead of inheriting the body
       typography — which is what sized every .cat-btn and .hamburger. */
    button, input, optgroup, select, textarea {
      color: inherit;
      font: inherit;
      margin: 0;
    }

    /* normalize.css again, and it must stay after the `font: inherit` above:
       it deliberately walks back the inherited line-height for text inputs
       only. exclusive.html's password field depends on this. */
    input { line-height: normal; }

    /* Webflow's base <p>. It always declared font-family: Inter Tight, but
       until now these pages never actually loaded that font (they only
       shipped Syne + DM Sans), so every <p> silently fell back to generic
       sans-serif. Now that Inter Tight is loaded site-wide, this rule
       finally renders as originally declared. */
    p {
      color: var(--orange);
      margin-top: 0;
      margin-bottom: 10px;
      font-family: 'Inter Tight', sans-serif;
      font-size: 18px;
      font-weight: 500;
      line-height: 1.3;
    }

    img {
      vertical-align: middle;
      max-width: 100%;
      display: inline-block;
    }

    /* .player-title is a <p> with no other class-based color rule, so
       without this it would inherit the orange from the base `p` rule
       above. Scoped here rather than changing that base rule, since
       .channel-name relies on the same fallback and should stay orange. */
    .player-title {
      color: var(--text);
    }


    /* ─── Design Tokens ─────────────────────────────────────── */
    :root {
      --bg:         #161412;
      --surface:    #1f1c1a;
      --surface-2:  #2a2623;
      --border:     #3a3531;
      --amber:      #fe0000;
      --amber-dim:  #fe0000;
      --amber-glow: rgba(254,0,0,0.20);
      --text:       #f4f0eb;
      --muted:      #8f8579;
      --radius:     10px;
      --font-display: 'Oswald', -apple-system, BlinkMacSystemFont, sans-serif;
      --font-body:    'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
    }

    /* ─── Reset ─────────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html, body.chanel { height: 100%; }

    body.chanel {
      background: #161412;
      background: var(--bg);
      color: var(--text);
      font-family: var(--font-body);
      font-size: 15px;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    /* ─── Screens ────────────────────────────────────────────── */
    .screen {
      min-height: 100vh;
      width: 100%;
      display: none;
      opacity: 0;
      transition: opacity 0.45s ease;
    }
    .screen.active {
      display: flex;
      opacity: 1;
    }

    /* ─── Lock Screen ────────────────────────────────────────── */
    #lock-screen {
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }

    .lock-card {
      width: 100%;
      max-width: 400px;
      padding: 2.5rem 2rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1.75rem;
    }

    .lock-icon {
      width: 60px;
      height: 60px;
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--amber);
      -webkit-animation: float 3.5s ease-in-out infinite;
      animation: float 3.5s ease-in-out infinite;
    }

    @-webkit-keyframes float {
      0%, 100% { -webkit-transform: translateY(0); transform: translateY(0); }
      50%       { -webkit-transform: translateY(-6px); transform: translateY(-6px); }
    }
    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50%       { transform: translateY(-6px); }
    }

    .lock-title {
      font-family: var(--font-display);
      font-size: 2rem;
      font-weight: 800;
      letter-spacing: -0.03em;
      text-align: center;
      color: var(--text);
    }

    .lock-subtitle {
      font-size: 0.85rem;
      color: var(--muted);
      text-align: center;
    }

    .lock-form {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
    }

    .field-wrap input {
      width: 100%;
      padding: 0.85rem 1rem;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      color: var(--text);
      font-family: var(--font-body);
      font-size: 0.95rem;
      outline: none;
      -webkit-appearance: none;
      appearance: none;
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    .field-wrap input::-webkit-input-placeholder { color: var(--muted); }
    .field-wrap input::placeholder { color: var(--muted); }
    .field-wrap input:focus {
      border-color: var(--amber);
      box-shadow: 0 0 0 3px var(--amber-glow);
    }

    .btn-primary {
      width: 100%;
      padding: 0.9rem 1rem;
      background: var(--amber);
      color: #0e0d0c;
      font-family: var(--font-display);
      font-size: 0.95rem;
      font-weight: 700;
      letter-spacing: 0.02em;
      border: none;
      border-radius: var(--radius);
      cursor: pointer;
      transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
      -webkit-tap-highlight-color: transparent;
    }
    .btn-primary:hover {
      background: #fe0000;
      box-shadow: 0 6px 20px var(--amber-glow);
    }
    .btn-primary:active { transform: scale(0.98); }
    .btn-primary:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      transform: none;
    }

    .error-msg {
      font-size: 0.82rem;
      color: #e06060;
      text-align: center;
      min-height: 1.2em;
      opacity: 0;
      transition: opacity 0.25s;
    }
    .error-msg.visible { opacity: 1; }

    /* ─── Gallery Screen ─────────────────────────────────────── */
    #gallery-screen {
      flex-direction: column;
    }

    .site-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1.25rem 2rem;
      border-bottom: 1px solid var(--border);
      position: sticky;
      top: 0;
      background: rgba(22, 20, 18, 0.9);
      -webkit-backdrop-filter: blur(12px);
      backdrop-filter: blur(12px);
      z-index: 10;
    }

    .site-name {
      font-family: var(--font-display);
      font-size: 1.1rem;
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--amber);
    }

    .lock-btn {
      display: flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.45rem 0.85rem;
      background: transparent;
      border: 1px solid var(--border);
      border-radius: 6px;
      color: var(--muted);
      font-family: var(--font-body);
      font-size: 0.8rem;
      cursor: pointer;
      transition: color 0.2s, border-color 0.2s;
      -webkit-tap-highlight-color: transparent;
    }
    .lock-btn:hover {
      color: var(--text);
      border-color: var(--muted);
    }

    .gallery-body {
      padding: 2.5rem 2rem 4rem;
      max-width: 1200px;
      margin: 0 auto;
      width: 100%;
    }

    .gallery-heading {
      font-family: var(--font-display);
      font-size: 1.6rem;
      font-weight: 700;
      letter-spacing: -0.03em;
      margin-bottom: 1.75rem;
    }

    .gallery-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 1.25rem;
    }

    .video-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      overflow: hidden;
      cursor: pointer;
      transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
      -webkit-animation: fadeUp 0.5s ease both;
      animation: fadeUp 0.5s ease both;
    }
    .video-card:hover {
      transform: translateY(-4px);
      -webkit-transform: translateY(-4px);
      border-color: var(--amber-dim);
      box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 0 1px var(--amber-dim);
    }

    @-webkit-keyframes fadeUp {
      from { opacity: 0; -webkit-transform: translateY(16px); transform: translateY(16px); }
      to   { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
    }
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(16px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .card-thumb {
      position: relative;
      padding-bottom: 56.25%;
      height: 0;
      background: var(--surface-2);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .card-thumb img,
    .card-thumb video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.4s ease;
      pointer-events: none;
    }
    .video-card:hover .card-thumb img,
    .video-card:hover .card-thumb video {
      transform: scale(1.05);
    }

    .card-thumb::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(22, 20, 18, 0.75) 0%, rgba(22, 20, 18, 0.2) 60%, transparent 100%);
      pointer-events: none;
      z-index: 1;
    }

    .play-btn {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -26px;
      margin-left: -26px;
      width: 52px;
      height: 52px;
      background: rgba(254, 0, 0, 0.2);
      -webkit-backdrop-filter: blur(4px);
      backdrop-filter: blur(4px);
      border: 1.5px solid var(--amber);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--amber);
      z-index: 2;
      transition: background 0.2s, transform 0.2s, -webkit-transform 0.2s;
    }
    .video-card:hover .play-btn {
      background: var(--amber);
      color: #0e0d0c;
      transform: scale(1.08);
      -webkit-transform: scale(1.08);
    }

    .card-body {
      padding: 1rem 1.1rem 1.2rem;
    }

    .card-title {
      font-family: var(--font-display);
      font-size: 1rem;
      font-weight: 600;
      color: var(--text);
      letter-spacing: -0.01em;
      margin-bottom: 0.3rem;
    }

    .card-desc {
      font-size: 0.8rem;
      color: var(--muted);
      line-height: 1.5;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .empty-state {
      grid-column: 1 / -1;
      padding: 5rem 2rem;
      text-align: center;
      color: var(--muted);
    }
    .empty-state svg { margin-bottom: 1rem; color: var(--border); }
    .empty-state p { font-size: 0.9rem; }

    /* ─── Lightbox ───────────────────────────────────────────── */
    #lightbox {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 100;
      align-items: center;
      justify-content: center;
    }
    #lightbox.open { display: flex; }

    .lb-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(5, 4, 3, 0.92);
      cursor: pointer;
    }

    .lb-content {
      position: relative;
      z-index: 1;
      width: 90vw;
      max-width: 960px;
    }

    .lb-video-wrap {
      position: relative;
      aspect-ratio: 16 / 9;
      background: #000;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 32px 80px rgba(0,0,0,0.7);
    }
    .lb-video-wrap .plyr {
      position: absolute;
      inset: 0;
    }

    .lb-meta {
      margin-top: 1rem;
      padding: 0 0.25rem;
    }
    .lb-title {
      font-family: var(--font-display);
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--text);
    }
    .lb-desc {
      font-size: 0.83rem;
      color: var(--muted);
      margin-top: 0.25rem;
    }

    .lb-close {
      position: absolute;
      top: -2.75rem;
      right: 0;
      width: 34px;
      height: 34px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      border-radius: 6px;
      color: var(--muted);
      cursor: pointer;
      padding: 0;
      transition: color 0.2s;
    }
    .lb-close:hover { color: var(--text); }

    /* ─── Responsive ─────────────────────────────────────────── */
    @media (max-width: 600px) {
      .gallery-body { padding: 1.5rem 1rem 3rem; }
      .site-header { padding: 1rem; }
      .gallery-grid { grid-template-columns: 1fr; }
    }

    /* ── Mobile (both orientations): true full-viewport lightbox ── */
    @media (max-width: 900px) {
      /* Dim the whole screen */
      #lightbox {
        align-items: flex-start;
        justify-content: flex-start;
        padding: 0;
      }

      /* Close button floats above everything as a fixed overlay */
      .lb-close {
        position: fixed;
        top: 0.75rem;
        right: 0.75rem;
        z-index: 9999;
        width: 36px;
        height: 36px;
        background: rgba(10,9,8,0.80);
        border-radius: 6px;
        color: #fff;
        padding: 0;
      }

      /* Content fills the whole screen */
      .lb-content {
        width: 100vw;
        max-width: 100vw;
      }

      .lb-video-wrap {
        border-radius: 0;
        box-shadow: none;
      }

      .lb-meta {
        padding: 0.75rem 1rem 0;
      }
    }

    /* ── Landscape: hide meta so the video gets full height ── */
    @media (max-width: 900px) and (orientation: landscape) {
      .lb-meta { display: none; }
    }
  

    /* ── RecordBox preloader ──────────────────────────────────
       exclusive.html shows the hexagon preloader + fade-out overlay.
       The hexagon rules below are duplicated from style.css, which
       serves the same markup on index.html — kept in sync by hand so
       that video.html/exclusive.html don't have to pull in the whole
       110KB Webflow stylesheet just for a loading spinner. If you
       restyle the hexagon, change it in both places. */
    .rb-preloader {
      flex-direction: column;
      align-items: center;
      gap: 18px;
      display: flex;
    }

    .rb-hex { overflow: visible; }

    .rb-slice {
      stroke: var(--bg);
      stroke-width: 3px;
      stroke-linejoin: round;
      transform-box: fill-box;
      transform-origin: 50% 50%;
      opacity: 0;
      animation: rb-slice-cycle 1.2s cubic-bezier(0.22, 0.75, 0.32, 1.15) infinite;
    }

    .rb-slice-1, .rb-slice-6 { fill: #e3211f; }
    .rb-slice-2, .rb-slice-3 { fill: #221c19; }
    .rb-slice-4 { fill: #431411; }
    .rb-slice-5 { fill: #6f1a17; }

    .rb-slice-1 { animation-delay: 0.02s; }
    .rb-slice-2 { animation-delay: 0.05s; }
    .rb-slice-3 { animation-delay: 0.08s; }
    .rb-slice-4 { animation-delay: 0.11s; }
    .rb-slice-5 { animation-delay: 0.14s; }
    .rb-slice-6 { animation-delay: 0.17s; }

    @keyframes rb-slice-cycle {
      0%   { opacity: 0; transform: scale(0.25) rotate(-20deg); }
      27%  { opacity: 1; transform: scale(1.08) rotate(2deg); }
      38%  { opacity: 1; transform: scale(1) rotate(0deg); }
      67%  { opacity: 1; transform: scale(1) rotate(0deg); }
      100% { opacity: 0; transform: scale(0.25) rotate(-20deg); }
    }

    @media screen and (max-width: 479px) {
      .rb-hex { width: 90px; height: 90px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .rb-slice {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
      }
    }

    /* Full-screen overlay the preloader sits in. Only exclusive.html
       uses this one — index.html has its own .page-loading overlay. */
    .rb-loader-overlay {
      position: fixed;
      inset: 0;
      z-index: 3000;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--bg);
      opacity: 1;
      transition: opacity 0.4s ease;
    }

    .rb-loader-overlay.rb-loader-hidden {
      opacity: 0;
      pointer-events: none;
    }

    html.skip-preloader .rb-loader-overlay { display: none !important; }