/* ============ TOKENS ============ */
:root{
  --bg: #0c0a10;
  --bg-soft: #17131f;
  --card: rgba(255,255,255,.04);
  --ink: #f5efe3;
  --muted: #a89bb0;
  --magenta: #ff2f92;
  --cyan: #2de8ff;
  --yellow: #ffd23f;
  --line: rgba(245,239,227,.14);
  --display: 'Unbounded', sans-serif;
  --mono: 'JetBrains Mono', monospace;
  --body: 'Manrope', sans-serif;
}

.watermark {
    content: "ya-invite";
    position: fixed;
    font-size: 80px;
    color: rgba(255,255,255,0.08);
    transform: rotate(-25deg);
    pointer-events: none;
    z-index: 55555;
    white-space: nowrap;
    font-weight: 600; /* выглядит аккуратнее */
}



body::after {
    content: "ya-invite";
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-25deg);
    font-size: 80px;
    color: rgba(255,255,255,0.08);
    pointer-events:none;
    z-index:5555555;
    white-space:nowrap;
}

html::after {
    content: "ya-invite";
    position: fixed;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-25deg);
    font-size: 80px;
    color: rgba(255,255,255,0.08);
    pointer-events:none;
    z-index:555555;
    white-space:nowrap;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;}
button{font-family:inherit;}
body.no-scroll{ overflow:hidden; height:100vh; }

/* ============ SPLASH INTRO ============ */
.splash{
  position:fixed; inset:0; z-index:2000; background:#020103;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  transition:transform .6s cubic-bezier(.6,0,.4,1), opacity .45s ease .15s;
}
.splash.is-off{ transform:scaleY(.006); opacity:0; }
.splash__static{
  position:absolute; inset:0; opacity:.16; mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
  animation:staticFlicker .2s steps(2) infinite;
}
@keyframes staticFlicker{ 50%{ transform:translate(-1%, 1%); } }
.splash__scan{
  position:absolute; left:0; right:0; height:120px; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(45,232,255,.06), transparent);
  animation:scanSweep 3.4s linear infinite;
}
@keyframes scanSweep{ 0%{ top:-120px; } 100%{ top:100%; } }
.splash__content{ position:relative; z-index:2; text-align:center; }
.splash__rec-line{
  display:flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--mono); font-weight:700; letter-spacing:4px; text-transform:uppercase;
  font-size:1.05rem; color:#ff5b5b; margin:0 0 12px;
}
.splash__rec-dot{ width:10px; height:10px; border-radius:50%; background:#ff3b3b; display:inline-block; animation:blink 1.2s steps(1) infinite; }
.splash__counter{
  font-family:var(--mono); font-weight:700; font-size:clamp(2.6rem,9vw,4.5rem); color:var(--ink);
  text-shadow:0 0 10px rgba(245,239,227,.3); margin:0 0 10px; letter-spacing:2px;
}
.splash__label{
  font-family:var(--mono); font-size:.85rem; letter-spacing:3px; text-transform:uppercase;
  color:var(--muted); margin:0 0 40px;
}
.splash__play{
  display:inline-flex; align-items:center; gap:12px; border:1.5px solid var(--cyan); background:rgba(45,232,255,.06);
  color:var(--ink); font-family:var(--display); font-weight:700; font-size:clamp(.9rem,2vw,1.05rem);
  padding:16px 34px; border-radius:999px; cursor:pointer;
  box-shadow:0 0 26px rgba(45,232,255,.3); animation:playPulse 2.2s ease-in-out infinite;
  transition:transform .25s ease, background .25s ease;
}
.splash__play:hover{ transform:scale(1.05); background:rgba(45,232,255,.14); }
.splash__play-icon{ color:var(--cyan); }
@keyframes playPulse{ 0%,100%{ box-shadow:0 0 18px rgba(45,232,255,.25); } 50%{ box-shadow:0 0 34px rgba(45,232,255,.5); } }

/* ============ GLOBAL FX ============ */
.scanlines{
  position:fixed; inset:0; z-index:998; pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,.22) 3px);
  mix-blend-mode:multiply; opacity:.5;
}
.grain-overlay{
  position:fixed; inset:0; pointer-events:none; z-index:999;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.cursor-dot{
  position:fixed; top:0; left:0; width:26px; height:26px; border-radius:50%;
  border:1.5px solid var(--cyan); box-shadow:0 0 12px rgba(45,232,255,.6);
  pointer-events:none; z-index:1001; opacity:0;
  transition:opacity .3s ease, width .2s ease, height .2s ease;
}
.cursor-dot.is-active{ opacity:.8; }
.cursor-dot.is-pressed{ width:14px; height:14px; }
@media (hover:none), (pointer:coarse){ .cursor-dot{ display:none; } }

/* ============ NEON HELPERS ============ */
.neon-cyan{ color:var(--cyan); text-shadow:0 0 6px rgba(45,232,255,.7), 0 0 22px rgba(45,232,255,.45), 0 0 46px rgba(45,232,255,.25); }
.neon-magenta{ color:var(--magenta); text-shadow:0 0 6px rgba(255,47,146,.7), 0 0 22px rgba(255,47,146,.45), 0 0 46px rgba(255,47,146,.25); }
.neon-stroke{ fill:none; stroke:var(--cyan); stroke-width:2.4; filter:drop-shadow(0 0 4px rgba(45,232,255,.6)); }
.neon-stroke-fill{ fill:var(--cyan); filter:drop-shadow(0 0 4px rgba(45,232,255,.6)); }

/* ============ SECTIONS ============ */
.sheet{ position:relative; padding:clamp(70px,12vw,150px) clamp(24px,7vw,120px); background:var(--bg); border-bottom:1px solid var(--line); overflow:hidden; }
.sheet:nth-of-type(even){ background:var(--bg-soft); }

.section-title{
  text-align:center; font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.6rem,4.4vw,2.4rem); letter-spacing:.5px; margin:0 0 50px; position:relative;
}
.section-title::after{
  content:""; display:block; width:64px; height:3px; margin:16px auto 0;
  background:linear-gradient(90deg, var(--cyan), var(--magenta));
}

/* ============ HERO ============ */
.hero{
  min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding-top:100px; padding-bottom:100px;
}
.hero-bg{
  position:absolute; inset:0; z-index:0;
  background:url("images/background.jpg") center/cover no-repeat;
  filter:brightness(.5) saturate(1.15) contrast(1.05);
}
.hero-scrim{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(ellipse 700px 500px at 50% 20%, rgba(255,47,146,.14), transparent 60%),
    radial-gradient(ellipse 700px 500px at 20% 90%, rgba(45,232,255,.12), transparent 55%),
    linear-gradient(180deg, rgba(12,10,16,.55) 0%, rgba(12,10,16,.82) 65%, var(--bg) 100%);
}
.hero > *{ position:relative; z-index:2; }

.camcorder-ui{
  position:absolute; top:26px; left:26px; right:26px; z-index:3;
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--mono); font-size:.85rem; color:var(--ink); opacity:.85; letter-spacing:.5px;
}
.rec{ display:flex; align-items:center; gap:6px; color:#ff5b5b; }
.rec-dot{ width:8px; height:8px; border-radius:50%; background:#ff3b3b; display:inline-block; animation:blink 1.2s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:.15; } }
.camcorder-corner{ position:absolute; width:26px; height:26px; z-index:3; border-color:rgba(245,239,227,.45); }
.camcorder-corner--tl{ top:60px; left:26px; border-top:2px solid; border-left:2px solid; }
.camcorder-corner--tr{ top:60px; right:26px; border-top:2px solid; border-right:2px solid; }
.camcorder-corner--bl{ bottom:60px; left:26px; border-bottom:2px solid; border-left:2px solid; }
.camcorder-corner--br{ bottom:60px; right:26px; border-bottom:2px solid; border-right:2px solid; }

.kicker{
  font-family:var(--mono); font-size:.95rem; letter-spacing:1px; text-transform:uppercase;
  color:var(--cyan); margin:0 0 22px;
}

.hero-title{ margin:0 0 30px; }
.hero-title span{
  display:block; font-family:var(--display); font-weight:900; text-transform:uppercase;
  font-size:clamp(2rem, 6.6vw, 4.2rem); line-height:1.08; letter-spacing:.5px; color:var(--ink);
  position:relative;
}
.glitch span{ position:relative; }
.glitch::before, .glitch::after{
  content:attr(data-text); position:absolute; inset:0; margin:0 auto;
  font-family:var(--display); font-weight:900; text-transform:uppercase;
  font-size:clamp(2rem, 6.6vw, 4.2rem); line-height:1.08; letter-spacing:.5px;
  white-space:pre-line; overflow:hidden; pointer-events:none;
}
.glitch::before{ color:var(--cyan); mix-blend-mode:screen; animation:glitchTop 7s infinite linear; }
.glitch::after{ color:var(--magenta); mix-blend-mode:screen; animation:glitchBottom 7s infinite linear; }
@keyframes glitchTop{
  0%,92%,100%{ transform:translate(0,0); clip-path:inset(0 0 0 0); opacity:0; }
  93%{ transform:translate(-3px,-1px); clip-path:inset(10% 0 60% 0); opacity:.8; }
  95%{ transform:translate(3px,1px); clip-path:inset(60% 0 5% 0); opacity:.8; }
  97%{ transform:translate(-2px,0); clip-path:inset(30% 0 40% 0); opacity:.6; }
}
@keyframes glitchBottom{
  0%,92%,100%{ transform:translate(0,0); clip-path:inset(0 0 0 0); opacity:0; }
  93%{ transform:translate(3px,1px); clip-path:inset(60% 0 10% 0); opacity:.8; }
  95%{ transform:translate(-3px,-1px); clip-path:inset(5% 0 65% 0); opacity:.8; }
  97%{ transform:translate(2px,0); clip-path:inset(40% 0 30% 0); opacity:.6; }
}

.age-counter{ display:flex; flex-direction:column; align-items:center; gap:6px; margin-bottom:34px; }
.age-counter__label{ font-family:var(--mono); font-size:.8rem; letter-spacing:2px; text-transform:uppercase; color:var(--muted); }
.age-counter__num{ font-family:var(--display); font-weight:900; font-size:clamp(4rem,14vw,8rem); line-height:1; }

.cassette-badge{
  display:flex; align-items:center; gap:16px; background:rgba(255,255,255,.05);
  border:1px solid var(--line); border-radius:10px; padding:14px 22px;
  backdrop-filter:blur(4px); margin-bottom:36px;
}
.cassette-badge__reel{
  width:30px; height:30px; border-radius:50%;
  background:repeating-conic-gradient(var(--muted) 0deg 8deg, transparent 8deg 20deg);
  border:2px solid var(--cyan); position:relative; animation:spin 5s linear infinite;
}
.cassette-badge__reel::after{ content:""; position:absolute; inset:35%; border-radius:50%; background:var(--bg-soft); }
.cassette-badge__text{ display:flex; flex-direction:column; font-family:var(--mono); font-size:.85rem; letter-spacing:.5px; text-align:left; }
.cassette-badge__date{ color:var(--yellow); font-weight:700; margin-top:2px; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.scroll-cue{ font-family:var(--mono); font-size:.85rem; color:var(--muted); letter-spacing:1px; animation:pulse 1.8s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{opacity:.5;} 50%{opacity:1;} }

/* ============ INVITE TEXT (TV FRAME) ============ */
.invite-text{ display:flex; justify-content:center; }
.tv-frame{
  position:relative; max-width:560px; width:100%; text-align:center;
  border:1.5px solid rgba(45,232,255,.35); border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
  box-shadow:0 0 40px rgba(45,232,255,.08), inset 0 0 30px rgba(0,0,0,.3);
  padding:44px clamp(22px,5vw,54px);
}
.tv-frame__bar{ display:flex; gap:8px; justify-content:center; margin-bottom:30px; }
.tv-frame__bar span{ width:8px; height:8px; border-radius:50%; background:var(--muted); opacity:.5; }
.tv-frame__bar span:first-child{ background:#ff5b5b; opacity:.8; }
.tv-frame__bar span:last-child{ background:var(--cyan); opacity:.8; }

.tv-line{
  font-size:clamp(1.05rem,2.6vw,1.35rem); font-weight:400; color:var(--ink);
  margin:.5em 0; opacity:0; transform:translateY(14px);
  transition:opacity .8s ease, transform .8s ease;
}
.reveal-line.is-visible{ opacity:1; transform:translateY(0); }
.tv-line .hl{ color:var(--yellow); font-weight:700; }
.tv-line--accent{ font-family:var(--mono); color:var(--cyan); font-size:clamp(1.4rem,4vw,1.9rem); margin-top:.7em; }

/* ============ DATE ============ */
.date-block{ text-align:center; }
.date-eyebrow{ font-family:var(--mono); font-size:.95rem; color:var(--muted); letter-spacing:1px; margin-bottom:10px; }
.date-huge{ font-family:var(--display); font-weight:900; font-size:clamp(4.5rem,16vw,10rem); margin:0; line-height:1; }
.date-sep{ color:var(--cyan); }
.date-sub{ font-family:var(--mono); color:var(--muted); margin-top:14px; font-size:1.05rem; }

/* ============ LOCATION ============ */
.location{ text-align:center; }
.location-card{ display:flex; align-items:center; justify-content:center; gap:30px; flex-wrap:wrap; margin-bottom:40px; }
.boombox-svg{ width:110px; height:auto; }
.location-info{ text-align:left; }
.venue-name{ font-family:var(--display); font-weight:700; font-size:1.4rem; margin:0 0 6px; }
.venue-address{ font-family:var(--mono); font-size:1rem; color:var(--muted); margin:0 0 16px; }
.route-btn{
  display:inline-flex; align-items:center; gap:8px; border:1.5px solid var(--cyan); border-radius:999px;
  padding:10px 22px; text-decoration:none; font-family:var(--mono); font-size:.9rem; color:var(--cyan);
  transition:background .25s, color .25s, box-shadow .25s;
}
.route-btn svg path{ stroke:var(--cyan); transition:stroke .25s; }
.route-btn:hover{ background:var(--cyan); color:var(--bg); box-shadow:0 0 20px rgba(45,232,255,.5); }
.route-btn:hover path{ stroke:var(--bg); }

.map-frame{
  position:relative; max-width:720px; margin:0 auto; background:var(--bg-soft);
  border:1px solid var(--line); border-radius:12px; overflow:hidden;
  box-shadow:0 20px 50px rgba(0,0,0,.4);
}
.hand-map{ width:100%; height:340px; display:block; }
.map-stroke{ fill:none; stroke:rgba(45,232,255,.35); stroke-width:1.6; }
.hand-map .route{ stroke:var(--magenta); stroke-width:3; stroke-linecap:round; stroke-dasharray:6 9; filter:drop-shadow(0 0 5px rgba(255,47,146,.7)); opacity:0; transition:opacity 1s ease .3s; }
.location.is-visible .hand-map .route{ opacity:1; }
.hand-map-label{ font-family:var(--mono); font-size:14px; fill:var(--muted); }
.map-pin{ position:absolute; top:36%; left:51%; width:16px; height:16px; margin:-8px 0 0 -8px; background:var(--magenta); border-radius:50% 50% 50% 0; transform:rotate(-45deg); box-shadow:0 0 12px rgba(255,47,146,.8); }
.map-pin-label{ position:absolute; top:26%; left:calc(51% + 16px); font-family:var(--mono); font-size:.95rem; color:var(--magenta); }

/* ============ TRACKLIST ============ */
.timeline{ text-align:center; }
.cassette-icon{ width:120px; margin:0 auto 20px; }
.cassette-icon svg{ width:100%; height:auto; }
.reel{ transform-box:fill-box; transform-origin:center; animation:spin 6s linear infinite; }
.tracklist{ max-width:640px; margin:0 auto; text-align:left; }
.track{
  display:flex; align-items:baseline; gap:18px; padding:18px 10px; border-bottom:1px dashed var(--line);
  opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease;
}
.reveal-item.is-visible{ opacity:1; transform:translateY(0); }
.track:hover{ background:rgba(255,255,255,.03); }
.track__num{ font-family:var(--mono); font-weight:700; color:var(--magenta); width:34px; flex-shrink:0; }
.track__time{ font-family:var(--mono); font-weight:700; font-size:1.15rem; color:var(--cyan); width:64px; flex-shrink:0; }
.track__name{ font-size:1rem; color:var(--ink); }

/* ============ DRESS CODE ============ */
.dresscode{ text-align:center; }
.dresscode-sub{ color:var(--muted); max-width:520px; margin:0 auto 44px; line-height:1.6; }
.dress-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:18px; max-width:1100px; margin:0 auto; }
.dress-card{
  margin:0; position:relative; border-radius:8px; overflow:hidden; aspect-ratio:3/4;
  border:1px solid var(--line); box-shadow:0 12px 30px rgba(0,0,0,.35);
  transition:transform .35s ease, box-shadow .35s ease; opacity:0; transform:translateY(18px);
}
.reveal-item.dress-card.is-visible{ opacity:1; transform:translateY(0); }
.dress-card img{ width:100%; height:100%; object-fit:cover; filter:saturate(1.05) contrast(1.05); }
.dress-card::after{
  content:""; position:absolute; inset:0; mix-blend-mode:color;
  background:linear-gradient(160deg, rgba(255,47,146,.25), rgba(45,232,255,.2));
  opacity:.35; pointer-events:none;
}
.dress-card:hover{ transform:translateY(-8px); box-shadow:0 18px 40px rgba(45,232,255,.25); z-index:2; }

/* ============ MIXTAPE BANNER ============ */
.mixtape-banner{ position:relative; min-height:52vh; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.mixtape-banner__bg{ position:absolute; inset:0; background:url("images/background2.jpg") center 25%/cover no-repeat; }
.mixtape-banner__scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, var(--bg) 0%, rgba(12,10,16,.35) 20%, rgba(12,10,16,.35) 80%, var(--bg) 100%),
    linear-gradient(120deg, rgba(255,47,146,.22), rgba(45,232,255,.18));
}
.mixtape-banner__text{
  position:relative; z-index:1; font-family:var(--mono); text-transform:uppercase; letter-spacing:3px;
  font-size:clamp(.9rem,2.4vw,1.3rem); color:var(--ink); text-shadow:0 2px 20px rgba(0,0,0,.6);
  background:rgba(12,10,16,.4); padding:12px 26px; border:1px solid rgba(245,239,227,.3); border-radius:999px;
}

/* ============ WISHES ============ */
.wishes{ text-align:center; }
.cassette-btn{
  display:inline-flex; align-items:center; gap:16px; margin-top:30px; border:1.5px solid var(--magenta);
  background:rgba(255,47,146,.08); color:var(--ink); font-family:var(--display); font-weight:700;
  font-size:1rem; padding:16px 30px; border-radius:10px; cursor:pointer;
  box-shadow:0 0 24px rgba(255,47,146,.25); transition:transform .3s ease, box-shadow .3s ease, background .3s ease;
}
.cassette-btn:hover{ transform:translateY(-3px); box-shadow:0 0 34px rgba(255,47,146,.45); background:rgba(255,47,146,.14); }
.cassette-btn__reel{ width:22px; height:22px; border-radius:50%; border:2px solid var(--magenta); background:repeating-conic-gradient(rgba(255,47,146,.5) 0deg 8deg, transparent 8deg 20deg); animation:spin 4s linear infinite; }

.wishlist-modal{ position:fixed; inset:0; background:rgba(8,6,12,.75); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; z-index:1000; padding:20px; }
.wishlist-modal[hidden]{ display:none; }
.wishlist-modal__inner{
  position:relative; background:var(--bg-soft); border:1px solid rgba(45,232,255,.3); border-radius:14px;
  max-width:440px; width:100%; padding:40px 34px; box-shadow:0 0 60px rgba(45,232,255,.15);
}
.wishlist-close{ position:absolute; top:14px; right:16px; background:none; border:none; font-size:1.3rem; cursor:pointer; color:var(--muted); }
.wishlist-title{ font-family:var(--display); font-weight:700; font-size:1.5rem; text-align:center; margin:0 0 22px; color:var(--cyan); }
.wishlist-list{ list-style:none; padding:0; margin:0; font-family:var(--mono); font-size:.95rem; }
.wishlist-list li{ padding:12px 0; border-bottom:1px dashed var(--line); }
.wishlist-list li:last-child{ border-bottom:none; }

/* ============ RSVP ============ */
.rsvp-form{ max-width:480px; margin:0 auto; display:flex; flex-direction:column; gap:22px; }
.field{ display:flex; flex-direction:column; gap:8px; text-align:left; }
.field span{ font-family:var(--mono); font-size:.9rem; letter-spacing:.5px; color:var(--muted); text-transform:uppercase; }
.field input[type=text], .field input[type=number], .field textarea{
  border:none; border-bottom:2px solid var(--line); background:transparent; font-family:var(--body);
  font-size:1.05rem; padding:8px 2px; color:var(--ink); resize:vertical;
}
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--cyan); }
.field--radio{ border:none; padding:0; margin:0; }
.radio-row{ display:flex; gap:24px; }
.radio-row label{ display:flex; align-items:center; gap:8px; cursor:pointer; }

.submit-btn{
  align-self:center; margin-top:10px; border:1.5px solid var(--cyan); background:transparent; color:var(--ink);
  padding:14px 44px; font-size:1rem; font-family:var(--display); font-weight:600; letter-spacing:.5px;
  cursor:pointer; border-radius:999px; transition:background .25s, color .25s, box-shadow .25s;
}
.submit-btn:hover{ background:var(--cyan); color:var(--bg); box-shadow:0 0 24px rgba(45,232,255,.5); }
.rsvp-success{ text-align:center; font-family:var(--mono); font-size:1.05rem; color:var(--yellow); }

/* ============ FOOTER ============ */
.footer{ text-align:center; padding-top:60px; padding-bottom:60px; }
.footer-note{ font-family:var(--body); color:var(--muted); font-size:1.05rem; margin:0 0 14px; }
.footer-tape{ font-family:var(--mono); letter-spacing:4px; color:var(--cyan); font-size:1.1rem; }

/* ============ RESPONSIVE ============ */
@media (max-width:900px){
  .sheet{ padding:clamp(56px,10vw,110px) clamp(20px,6vw,80px); }
}

@media (max-width:640px){
  .sheet{ padding:56px 20px; }
  .camcorder-ui{ top:16px; left:16px; right:16px; font-size:.72rem; }
  .camcorder-corner{ display:none; }
  .cassette-badge{ flex-direction:row; padding:12px 16px; gap:10px; }
  .cassette-badge__text{ font-size:.72rem; }
  .location-card{ flex-direction:column; text-align:center; }
  .location-info{ text-align:center; }
  .track{ flex-wrap:wrap; gap:6px 14px; }
  .track__name{ width:100%; order:3; }
  .dress-grid{ grid-template-columns:repeat(2, 1fr); gap:12px; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .glitch::before, .glitch::after{ display:none; }
}