/* ══ PREVIEW SPLASH STYLES ══ */
  @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400&display=swap');

  /* Splash wrapper — fixed, covers everything */
  #preview-splash {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #000;
    pointer-events: all;
  }

  /* Fade-out overlay */
  #preview-splash-fadeout {
    position: fixed;
    inset: 0;
    background: #eef0f5;
    z-index: 100000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1.8s cubic-bezier(0.4, 0, 0.2, 1);
  }
  #preview-splash-fadeout.active {
    opacity: 1;
    pointer-events: all;
  }

  /* TOP — black */
  #splash-top {
    position: relative;
    flex: 0 0 45%;
    background: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
    overflow: visible;
  }
  #splash-top::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    opacity: 0.4;
    pointer-events: none;
  }

  /* Text block */
  .splash-text-block {
    text-align: center;
    padding: 0 20px;
    padding-bottom: clamp(30px, 5vw, 55px);
    position: relative;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  /* ── ТЮГ logo container ── */
  .splash-title-tyug {
    display: flex;
    align-items: stretch;
    height: clamp(44px, 6.5vw, 80px);
    width: clamp(200px, 30vw, 340px);
    opacity: 0;
    transform: translateY(18px);
    animation:
      splashFadeUp 1.0s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards,
      tugOpen      2.8s cubic-bezier(0.16, 1, 0.3, 1) 1.4s forwards;
  }
  @keyframes tugOpen {
    from { width: clamp(200px, 30vw, 340px); }
    to   { width: clamp(300px, 72vw, 680px); }
  }

  /* Т — ліва частина + права дужка Ю */
  .splash-logo-t {
    flex-shrink: 0;
    height: 100%;
    aspect-ratio: 176.22 / 100;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 176.22 100'%3E%3Cpolygon fill='white' points='31.14 0 0 0 0 21.91 31.14 21.91 31.14 100 53.05 100 53.05 21.91 84.19 21.91 84.19 0 53.05 0'/%3E%3Cpath fill='white' d='M176.22,21.91V0h-40.66V38.38h-14.93V0h-21.91V100h21.91V60.29h14.93v39.71h40.66v-21.91h-18.75V21.91h18.75Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
  }

  /* Ю — дві суцільні смуги через CSS градієнт, розтягується разом з контейнером */
  .splash-logo-u {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    background: linear-gradient(
      to bottom,
      white 0%,        white 21.91%,
      transparent 21.91%, transparent 78.09%,
      white 78.09%,    white 100%
    );
  }

  /* Г — ліва дужка Ю + права літера Г */
  .splash-logo-g {
    flex-shrink: 0;
    height: 100%;
    aspect-ratio: 129.81 / 100;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 129.81 100'%3E%3Cpolygon fill='white' points='129.81 0 129.81 21.91 87.72 21.91 87.72 100 65.8 100 65.8 0 129.81 0'/%3E%3Cpolygon fill='white' points='51.62 0 51.62 100 0 100 0 78.09 29.71 78.09 29.71 21.91 0 21.91 0 0 51.62 0'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
  }
  .splash-title-full {
    font-family: 'Montserrat', sans-serif;
    font-weight: 100;
    font-size: clamp(0.55rem, 1.5vw, 0.85rem);
    color: rgba(255,255,255,0.92);
    letter-spacing: 0.5em;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(14px);
    animation: splashFadeUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1.1s forwards;
    margin-top: clamp(8px, 1.5vw, 14px);
    text-shadow: 0 1px 12px rgba(0,0,0,0.5);
  }
  .splash-divider {
    width: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
    margin: clamp(14px, 2.5vw, 22px) auto;
    animation: splashExpandLine 1s cubic-bezier(0.16, 1, 0.3, 1) 1.8s forwards;
  }
  .splash-subtitle {
    font-family: 'Montserrat', sans-serif;
    font-weight: 200;
    font-size: clamp(0.5rem, 1.2vw, 0.75rem);
    color: rgba(255,255,255,0.78);
    letter-spacing: 0.35em;
    text-transform: uppercase;
    opacity: 0;
    animation: splashFadeIn 1.2s ease 2.4s forwards;
    text-shadow: 0 1px 10px rgba(0,0,0,0.6);
  }
  .splash-quote {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 300;
    font-size: clamp(0.75rem, 1.8vw, 1.1rem);
    color: rgba(255,255,255,0.82);
    letter-spacing: 0.04em;
    line-height: 1.7;
    max-width: 520px;
    width: 100%;
    text-align: center;
    opacity: 0;
    animation: splashFadeIn 1.4s ease 3.1s forwards;
    margin-top: clamp(10px, 2vw, 18px);
    margin-left: auto;
    margin-right: auto;
    padding: 0 10px;
    text-shadow: 0 1px 14px rgba(0,0,0,0.55);
  }

  @keyframes splashFadeUp { to { opacity: 1; transform: translateY(0); } }
  @keyframes splashFadeIn { to { opacity: 1; } }
  @keyframes splashExpandLine { to { width: clamp(80px, 20vw, 200px); } }

  /* ── ТЮГ logo animation — handled above via tugOpen ── */

  /* Ink/Smoke zone */
  #splash-ink-zone {
    position: relative;
    flex: 0 0 0px;
    z-index: 5;
    overflow: visible;
    pointer-events: none;
  }
  .splash-ink-canvas-wrap {
    position: absolute;
    left: 0; right: 0;
    top: -80px;
    height: 160px;
    overflow: hidden;
    pointer-events: none;
  }
  canvas#splashInkCanvas {
    width: 100%;
    height: 100%;
    display: block;
  }

  /* BOTTOM — white */
  #splash-bottom {
    position: relative;
    flex: 1;
    background: #f4f4f2;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    padding: clamp(20px, 4vw, 50px);
    padding-top: clamp(60px, 8vw, 90px);
  }

  /* Device frame */
  .splash-device-wrap {
    position: relative;
    width: 100%;
    max-width: min(680px, 88vw);
    opacity: 0;
    transform: translateY(22px);
    animation: splashFadeUp 1.4s cubic-bezier(0.16, 1, 0.3, 1) 2s forwards;
  }
  .splash-device-frame {
    position: relative;
    width: 100%;
    background: #111;
    border-radius: clamp(12px, 2.5vw, 20px);
    padding: clamp(4px, 0.8vw, 7px);
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.08),
      0 2px 4px rgba(0,0,0,0.3),
      0 8px 30px rgba(0,0,0,0.25),
      0 30px 70px rgba(0,0,0,0.18);
  }
  .splash-device-frame::before {
    content: '';
    position: absolute;
    top: clamp(2px, 0.5vw, 4px);
    left: 50%;
    transform: translateX(-50%);
    width: clamp(3px, 0.6vw, 5px);
    height: clamp(3px, 0.6vw, 5px);
    background: #2a2a2a;
    border-radius: 50%;
    z-index: 20;
  }
  .splash-device-screen {
    position: relative;
    width: 100%;
    border-radius: clamp(8px, 1.8vw, 14px);
    overflow: hidden;
    background: #000;
    aspect-ratio: 16 / 6.5;
  }

  /* Video grid — 3 columns desktop */
  .splash-video-grid {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: clamp(1px, 0.3vw, 3px);
    background: #1a1a1a;
  }
  .splash-video-cell {
    position: relative;
    overflow: hidden;
    background: #0a0a0a;
  }
  .splash-video-cell video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.8s ease;
  }
  .splash-video-cell video.splash-loaded { opacity: 1; }
  .splash-video-cell::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, #0f0f0f 30%, #1e1e1e 50%, #0f0f0f 70%);
    background-size: 200% 100%;
    animation: splashShimmer 2s infinite;
  }
  .splash-video-cell::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
    pointer-events: none;
    z-index: 2;
  }
  @keyframes splashShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  /* Logo overlay inside screen */
  .splash-screen-logo {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(6px, 1.2vw, 10px) 0;
    background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.3) 70%, transparent 100%);
    pointer-events: none;
  }
  .splash-screen-logo-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 200;
    font-size: clamp(0.42rem, 1vw, 0.72rem);
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.55em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .splash-screen-logo-text span { color: rgba(255,255,255,0.85); font-weight: 300; }

  /* ── TABLET (≤768px) ── */
  @media (max-width: 768px) {
    #splash-top { flex: 0 0 44%; }
    .splash-device-wrap { max-width: 92vw; }
    .splash-device-screen { aspect-ratio: 16 / 7; }
    .splash-title-tyug { height: clamp(38px, 5.5vw, 62px); }
    .splash-title-full { font-size: clamp(0.5rem, 2vw, 0.75rem); letter-spacing: 0.35em; }
    .splash-subtitle { font-size: clamp(0.48rem, 1.6vw, 0.68rem); letter-spacing: 0.25em; }
    .splash-quote { font-size: clamp(0.7rem, 2.2vw, 0.95rem); }
    .splash-screen-logo-text { font-size: clamp(0.45rem, 1.4vw, 0.65rem); letter-spacing: 0.4em; }
  }

  /* ── MOBILE (≤600px) — ONE VIDEO ── */
  @media (max-width: 600px) {
    #splash-top { flex: 0 0 46%; }
    #splash-bottom { padding: clamp(50px, 7vw, 70px) 16px 16px; }
    .splash-device-wrap { max-width: 88vw; }
    .splash-device-screen { aspect-ratio: 16 / 11; }

    /* Only centre video */
    .splash-video-grid { grid-template-columns: 1fr; }
    .splash-video-cell:nth-child(1),
    .splash-video-cell:nth-child(3) { display: none; }

    .splash-title-tyug { height: clamp(40px, 11vw, 60px); }
    .splash-title-full { font-size: clamp(0.5rem, 2.8vw, 0.72rem); letter-spacing: 0.3em; margin-top: 10px; }
    .splash-divider { margin: 12px auto; }
    .splash-subtitle { font-size: clamp(0.45rem, 2.2vw, 0.62rem); letter-spacing: 0.2em; }
    .splash-quote { font-size: clamp(0.78rem, 3.2vw, 1rem); line-height: 1.65; margin-top: 10px; }
    .splash-text-block { padding: 0 16px; padding-bottom: 24px; }
    .splash-screen-logo-text { font-size: clamp(0.5rem, 2.2vw, 0.7rem); letter-spacing: 0.35em; }
  }

  /* ── VERY SMALL (≤380px) ── */
  @media (max-width: 380px) {
    #splash-top { flex: 0 0 48%; }
    .splash-title-tyug { height: clamp(34px, 10vw, 48px); }
    .splash-title-full { font-size: 0.48rem; letter-spacing: 0.22em; }
    .splash-subtitle { font-size: 0.44rem; letter-spacing: 0.16em; }
    .splash-quote { font-size: clamp(0.72rem, 3.5vw, 0.88rem); line-height: 1.6; }
    .splash-text-block { padding-bottom: 22px; }
  }

  /* ── LANDSCAPE MOBILE ── */
  @media (max-width: 812px) and (orientation: landscape) {
    #splash-top { flex: 0 0 50%; }
    #splash-bottom { padding-top: clamp(45px, 6vw, 65px); }
    .splash-device-wrap { max-width: 70vw; }
    .splash-device-screen { aspect-ratio: 16 / 5.5; }
    .splash-title-tyug { height: clamp(30px, 6vw, 50px); }
    .splash-title-full { font-size: clamp(0.44rem, 1.4vw, 0.62rem); margin-top: 6px; }
    .splash-quote { font-size: clamp(0.62rem, 1.6vw, 0.85rem); margin-top: 6px; }
    .splash-text-block { padding-bottom: 18px; }
  }

  /* ── LARGE DESKTOP ── */
  @media (min-width: 1200px) { .splash-device-wrap { max-width: 760px; } }
  @media (min-height: 900px) and (min-width: 768px) { #splash-top { flex: 0 0 48%; } }