:root{
    --bg:#050505;
    --panel:#111111;
    --accent:#ffffff;
    --ink:#f2f1ee;
    --muted:#8f8f8c;
    --hair:rgba(242,241,238,0.14);
    box-sizing:border-box;
    padding-top:env(safe-area-inset-top,0px);
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  *{box-sizing:inherit;}
  html{scroll-padding-top:env(safe-area-inset-top,0px);}
  html,body{height:100%;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:'Inter',system-ui,-apple-system,sans-serif;
    overflow:hidden;
    -webkit-font-smoothing:antialiased;
  }

  /* ---------- animated cinematic backdrop ---------- */
  #bg{position:fixed;inset:0;z-index:0;}
  #grain{position:fixed;inset:0;z-index:1;opacity:0.05;pointer-events:none;mix-blend-mode:overlay;}
  .vignette{
    position:fixed;inset:0;z-index:2;pointer-events:none;
    background:radial-gradient(ellipse at 50% 45%, transparent 30%, rgba(0,0,0,0.75) 100%);
  }
  .beam{
    position:fixed;top:-20%;left:50%;
    width:140vmax;height:140vmax;
    transform:translateX(-50%);
    background:conic-gradient(from 0deg,
      transparent 0deg, rgba(255,255,255,0.055) 10deg, transparent 26deg,
      transparent 190deg, rgba(255,255,255,0.04) 202deg, transparent 220deg, transparent 360deg);
    animation:sweep 34s linear infinite;
    z-index:0;
    filter:blur(2px);
  }
  /* soft blurred glow ellipse behind the mark */
  .glow{
    position:fixed;top:50%;left:50%;
    width:min(70vw,720px);height:min(70vw,720px);
    transform:translate(-50%,-50%);
    background:radial-gradient(ellipse at center, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.04) 40%, transparent 72%);
    filter:blur(60px);
    z-index:0;
    pointer-events:none;
  }
  /* dark gradient overlay to deepen the frame edges */
  .dark-overlay{
    position:fixed;inset:0;z-index:2;pointer-events:none;
    background:radial-gradient(ellipse 90% 70% at 50% 45%, transparent 45%, rgba(0,0,0,0.55) 85%, rgba(0,0,0,0.85) 100%);
  }
  @keyframes sweep{to{transform:translateX(-50%) rotate(360deg);}}
  .scratches{position:fixed;inset:0;z-index:1;opacity:0.035;pointer-events:none;
    background-image:repeating-linear-gradient(90deg, transparent 0 3px, rgba(255,255,255,0.6) 3px 4px, transparent 4px 140px);
    animation:drift 9s linear infinite;
  }
  @keyframes drift{from{background-position-x:0;}to{background-position-x:-1400px;}}

  /* ---------- layout ---------- */
  main{
    position:relative;z-index:3;
    height:100%;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;
    padding:24px;
    gap:clamp(20px,4vh,40px);
  }

  .mark{display:flex;flex-direction:column;align-items:center;gap:14px;}
  .mark img{
    width:min(280px,52vw);
    height:auto;
    display:block;
    filter:drop-shadow(0 0 26px rgba(255,255,255,0.08));
  }
  .sub{
    font-size:0.72rem;
    letter-spacing:0.35em;
    color:var(--muted);
    margin:0;
    font-weight:500;
    position: relative;
  }
  .sub:after{content:"";content: "";height: 1px;display: block;width: 100px;position: absolute;top: 50%;transform: translateY(-50%);background: #fff;right: 110%;}
.sub:before{content:"";height: 1px;display: block;width: 100px;position: absolute;top: 50%;transform: translateY(-50%);background: #fff;left: 110%;}

  .hairline{width:56px;height:1px;background:var(--hair);display: none;}

  h1.headline{
    font-family:'Cormorant Garamond',serif;
    font-weight:500;
    font-size:clamp(1.7rem,4.4vw,2.7rem);
    line-height:1.3;
    max-width: 30ch;
    margin:0;
    color:var(--ink);
  }
  .headline em{
    font-style:italic;
    color:var(--ink);
    font-size: 60px;
    display: block;
    font-weight: 600;
    text-transform: uppercase;
  }

  .studio-line{
    font-size:0.85rem;
    color:var(--muted);
    max-width:38ch;
    line-height:1.6;
    margin:0;
    display: table;
    margin: 0 auto 20px;
  }

.video-bg{position: absolute;left: 0;right: 0;width: 100%;left: 0;left: 0;top: 0;bottom: 0;z-index: -1;}

.info-btn{}
.info-btn a{
    background: #fff;
    display: inline-block;
    margin-top: 20px;
    padding: 10px 15px;
    border-radius: 8px;
    text-decoration: none;
    color: #000;
    border: 2px solid #fff;
    transition: all 0.3s ease;
}
.info-btn a:hover{
    border: 2px solid #fff;
    background: transparent;
    color: #fff;
}
.info-toggle{}

.content-box{}

.video-bg video{width: 100vw;height:100vh;object-fit:cover;position:fixed;top:0;left:0;z-index:-1;}
.video-bg:after{
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: repeating-radial-gradient(circle, #525252e0 0%, #000000 100%);
  z-index: 1;
  bottom: 0;
  right: 0;
  z-index: 19;
  /* background: red; */
  left: 0;
  top: 0;
}


  /* ---------- countdown ---------- */
  .countdown{display:flex;gap:clamp(14px,3vw,28px);}
  .unit{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:58px;}
  .unit .num{
    font-family:'Bebas Neue',sans-serif;
    font-size:clamp(1.8rem,5vw,2.8rem);
    color:var(--ink);
    line-height:1;
    font-variant-numeric:tabular-nums;
  }
  .unit .lab{
    font-size:0.62rem;
    letter-spacing:0.22em;
    color:var(--muted);
    font-weight:500;
  }
  .colon{
    align-self:flex-start;
    margin-top:2px;
    font-family:'Bebas Neue',sans-serif;
    font-size:clamp(1.4rem,4vw,2.2rem);
    color:var(--hair);
  }

  /* ---------- notify form ---------- */
  form{display:flex;gap:8px;width:min(360px,86vw);}
  input[type="email"]{
    flex:1;
    background:var(--panel);
    border:1px solid var(--hair);
    color:var(--ink);
    padding:12px 14px;
    border-radius:3px;
    font-family:'Inter',sans-serif;
    font-size:0.85rem;
    outline:none;
  }
  input[type="email"]::placeholder{color:var(--muted);}
  input[type="email"]:focus{border-color:var(--accent);}
  button{
    background:var(--accent);
    color:#0a0a0a;
    border:none;
    padding:0 18px;
    border-radius:3px;
    font-family:'Inter',sans-serif;
    font-weight:600;
    font-size:0.85rem;
    cursor:pointer;
    transition:background 0.2s ease;
  }
  button:hover{background:#d8d8d5;}
  button:focus-visible, input:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
  .note{font-size:0.72rem;color:var(--muted);min-height:1em;}

  footer{
    position:absolute;bottom:calc(18px + env(safe-area-inset-bottom,0px));
    z-index:3;
    font-size:0.68rem;
    letter-spacing:0.12em;
    color:var(--muted);
  }

  @media (max-width:420px){
    .countdown{gap:12px;}
    .unit{min-width:48px;}
  }

  @media (prefers-reduced-motion: reduce){
    .beam,.scratches{animation:none;}
  }