:root {
  color-scheme: dark;
  --ink: #000;
  --paper: #fafafa;
  --blood: #650000;
}

* { box-sizing: border-box; }

html {
  background: var(--ink);
  scroll-behavior: smooth;
  scrollbar-color: #4a0000 #050505;
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: #000;
  color: var(--paper);
  font-family: Raleway, Inter, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

img { display: block; }
figure, h1, p { margin: 0; }

main { position: relative; z-index: 1; }

.desktop-layout,
.mobile-layout {
  display: flex;
  justify-content: center;
  width: 100%;
  background: #000;
}

.desktop-layout {
  width: min(100%, 1440px);
  margin-inline: auto;
  container-type: inline-size;
}

.design-canvas {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #000;
}

.desktop-canvas {
  width: 100cqw;
  height: calc(5400 * (100cqw / 1440));
  min-height: 100vh;
  --s: calc(100cqw / 1440);
}

.mobile-layout { display: none; }

.ambient {
  position: fixed;
  z-index: 30;
  inset: 0;
  pointer-events: none;
}

.vignette {
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 13vw rgba(0, 0, 0, .76);
}

.grain {
  position: absolute;
  inset: -45%;
  opacity: .045;
  background-image:
    repeating-radial-gradient(circle at 17% 32%, #fff 0 .6px, transparent .7px 3px),
    repeating-radial-gradient(circle at 73% 61%, #fff 0 .45px, transparent .55px 2.4px);
  background-size: 11px 13px, 17px 19px;
  animation: grainShift .2s steps(2) infinite;
}

.cursor-glow {
  position: absolute;
  width: 28rem;
  height: 28rem;
  left: var(--pointer-x, 50%);
  top: var(--pointer-y, 30%);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(85, 0, 0, .09), transparent 66%);
  mix-blend-mode: screen;
  transition: left .18s ease-out, top .18s ease-out;
}

.impact-flash {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: #360000;
  mix-blend-mode: screen;
}

.blood-struck .impact-flash { animation: impactFlash .23s steps(2, end); }

.blood {
  position: absolute;
  z-index: -1;
  opacity: 0;
  will-change: transform, opacity;
}

.blood img { width: 100%; height: 100%; object-fit: cover; }

.blood.is-visible {
  animation: bloodImpact .24s steps(2, end) forwards, bloodBreathe 8s 1s ease-in-out infinite alternate;
}

.blood-desktop {
  left: calc(-7 * var(--s));
  top: 0;
  width: calc(1447 * var(--s));
  height: calc(1148 * var(--s));
  overflow: hidden;
}

.blood-desktop img {
  position: absolute;
  width: calc(1148 * var(--s));
  height: calc(1447 * var(--s));
  left: calc(149.5 * var(--s));
  top: calc(-149.5 * var(--s));
  transform: rotate(-90deg);
}

.desktop-logo {
  position: absolute;
  left: calc(788 * var(--s));
  top: calc(60 * var(--s));
  width: calc(184 * var(--s));
  height: calc(44 * var(--s));
}

.desktop-title {
  position: absolute;
  left: calc(116 * var(--s));
  top: calc(192 * var(--s));
  width: calc(1208 * var(--s));
  height: calc(651 * var(--s));
  object-fit: contain;
  mix-blend-mode: screen;
}

.desktop-date {
  position: absolute;
  left: calc(675 * var(--s));
  top: calc(1069 * var(--s));
  width: calc(470 * var(--s));
  height: calc(70 * var(--s));
  mix-blend-mode: screen;
}

.desktop-address {
  position: absolute;
  left: calc(806 * var(--s));
  top: calc(1201 * var(--s));
  font-size: calc(32 * var(--s));
  line-height: 1.13;
  letter-spacing: calc(-.64 * var(--s));
}

.desktop-dress-title {
  position: absolute;
  left: calc(50 * var(--s));
  top: calc(1404 * var(--s));
  width: calc(574 * var(--s));
  height: calc(153 * var(--s));
  object-fit: contain;
  object-position: left top;
  mix-blend-mode: screen;
}

.desktop-dress-copy {
  position: absolute;
  left: calc(50 * var(--s));
  top: calc(1576 * var(--s));
  width: calc(796 * var(--s));
  font-size: calc(32 * var(--s));
  line-height: 1.13;
  letter-spacing: calc(-.64 * var(--s));
}

.desktop-collage { position: absolute; inset: 0; }
.photo { position: absolute; overflow: hidden; background: #090909; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.dc-a { left: calc(379 * var(--s)); top: calc(1719 * var(--s)); width: calc(255 * var(--s)); height: calc(315 * var(--s)); }
.dc-b { left: calc(654 * var(--s)); top: calc(1404 * var(--s)); width: calc(434 * var(--s)); height: calc(636 * var(--s)); }
.dc-c { left: calc(503 * var(--s)); top: calc(2054 * var(--s)); width: calc(283 * var(--s)); height: calc(446 * var(--s)); }
.dc-d { left: calc(1108 * var(--s)); top: calc(1404 * var(--s)); width: calc(282 * var(--s)); height: calc(376 * var(--s)); }
.dc-e { left: calc(1108 * var(--s)); top: calc(1800 * var(--s)); width: calc(282 * var(--s)); height: calc(240 * var(--s)); }
.dc-f { left: calc(50 * var(--s)); top: calc(2054 * var(--s)); width: calc(433 * var(--s)); height: calc(446 * var(--s)); }
.dc-g { left: calc(806 * var(--s)); top: calc(2054 * var(--s)); width: calc(278 * var(--s)); height: calc(446 * var(--s)); }
.dc-h { left: calc(1104 * var(--s)); top: calc(2054 * var(--s)); width: calc(287 * var(--s)); height: calc(446 * var(--s)); }

.desktop-legend {
  position: absolute;
  left: calc(50 * var(--s));
  top: calc(2650 * var(--s));
  width: calc(1018 * var(--s));
  font-size: calc(60 * var(--s));
  line-height: 1;
  font-weight: 500;
  letter-spacing: calc(-1.2 * var(--s));
}

.desktop-story-one,
.desktop-story-two {
  position: absolute;
  font-size: calc(32 * var(--s));
  line-height: 1.15;
  letter-spacing: calc(-.64 * var(--s));
}

.desktop-story-one { left: calc(50 * var(--s)); top: calc(2853 * var(--s)); width: calc(754 * var(--s)); }
.desktop-story-two { left: calc(654 * var(--s)); top: calc(4326 * var(--s)); width: calc(736 * var(--s)); }

.desktop-story-photo {
  position: absolute;
  left: calc(957 * var(--s));
  top: calc(2853 * var(--s));
  width: calc(433 * var(--s));
  height: calc(403 * var(--s));
  overflow: hidden;
}

.desktop-story-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }

.desktop-web-scene {
  position: absolute;
  left: 0;
  top: calc(3406 * var(--s));
  width: calc(1442 * var(--s));
  height: calc(994 * var(--s));
  overflow: hidden;
}

.desktop-web-scene .web-photo {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(770 * var(--s));
  object-fit: cover;
}

.desktop-web-scene .web-overlay {
  position: absolute;
  left: calc(-83 * var(--s));
  top: 0;
  width: calc(1525 * var(--s));
  height: calc(994 * var(--s));
}

.desktop-final-photo {
  position: absolute;
  left: calc(50 * var(--s));
  top: calc(4326 * var(--s));
  width: calc(573 * var(--s));
  height: calc(479 * var(--s));
  overflow: hidden;
}

.desktop-final-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }

.sword-stage { position: absolute; overflow: hidden; }
.desktop-sword-stage { left: 0; top: calc(4805 * var(--s)); width: 100%; height: calc(595 * var(--s)); }
.sword {
  position: absolute;
  opacity: 0;
  will-change: transform, opacity;
}
.desktop-sword-stage .sword {
  left: calc(170 * var(--s));
  top: calc(310 * var(--s));
  width: calc(1100 * var(--s));
  height: auto;
  transform: translateX(140%);
}
.sword-stage.is-fired .sword { animation: swordStrike .33s cubic-bezier(.12,.84,.17,1) forwards, swordShiver .22s .34s ease-out; }

.hero-flicker { animation: candleFlicker 6s ease-in-out infinite; }

.masked-art {
  background-image: var(--mask);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: contrast(20);
  mix-blend-mode: screen;
}

.desktop-title,
.mobile-title { --mask: url('assets/title.png'); }
.desktop-date,
.mobile-date { --mask: url('assets/date.png'); }
.desktop-dress-title,
.mobile-dress-title { --mask: url('assets/dress-code.png'); }

.js .reveal {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity .9s ease, transform .9s cubic-bezier(.2,.75,.2,1);
}
.js .reveal.is-revealed { opacity: 1; transform: translate3d(0, 0, 0); }

@media (max-width: 699px) {
  .desktop-layout { display: none; }
  .mobile-layout {
    display: flex;
    width: min(100%, 390px);
    margin-inline: auto;
    container-type: inline-size;
  }
  .mobile-canvas {
    width: 100cqw;
    height: calc(2710 * (100cqw / 390));
    --s: calc(100cqw / 390);
  }
  .cursor-glow { display: none; }

  .blood-mobile {
    left: calc(-188 * var(--s));
    top: calc(-94 * var(--s));
    width: calc(765 * var(--s));
    height: calc(965 * var(--s));
  }

  .mobile-logo { position: absolute; left: calc(140 * var(--s)); top: calc(60 * var(--s)); width: calc(110 * var(--s)); height: calc(25 * var(--s)); }
  .mobile-title { position: absolute; left: calc(25.27 * var(--s)); top: calc(314 * var(--s)); width: calc(301 * var(--s)); height: calc(144 * var(--s)); object-fit: contain; mix-blend-mode: screen; }
  .mobile-date { position: absolute; left: calc(214 * var(--s)); top: calc(838 * var(--s)); width: calc(148 * var(--s)); height: calc(22 * var(--s)); mix-blend-mode: screen; }
  .mobile-address { position: absolute; right: calc(21 * var(--s)); top: calc(886 * var(--s)); font-size: calc(14 * var(--s)); line-height: 1.08; text-align: right; letter-spacing: calc(-.28 * var(--s)); }
  .mobile-dress-title { position: absolute; left: calc(20 * var(--s)); top: calc(978 * var(--s)); width: calc(173 * var(--s)); height: calc(46 * var(--s)); mix-blend-mode: screen; }
  .mobile-dress-copy { position: absolute; left: calc(20 * var(--s)); top: calc(1025 * var(--s)); width: calc(350 * var(--s)); font-size: calc(14 * var(--s)); line-height: 1.05; letter-spacing: calc(-.28 * var(--s)); }

  .mobile-collage { position: absolute; inset: 0; }
  .mc-a { left: calc(20 * var(--s)); top: calc(1133 * var(--s)); width: calc(80 * var(--s)); height: calc(92 * var(--s)); }
  .mc-b { left: calc(110 * var(--s)); top: calc(1088 * var(--s)); width: calc(171 * var(--s)); height: calc(250 * var(--s)); }
  .mc-c { left: calc(200 * var(--s)); top: calc(1348 * var(--s)); width: calc(170 * var(--s)); height: calc(213 * var(--s)); }
  .mc-d { left: calc(293 * var(--s)); top: calc(1026 * var(--s)); width: calc(80 * var(--s)); height: calc(107 * var(--s)); }
  .mc-e { left: calc(294 * var(--s)); top: calc(1143 * var(--s)); width: calc(79 * var(--s)); height: calc(67 * var(--s)); }
  .mc-f { left: calc(20 * var(--s)); top: calc(1348 * var(--s)); width: calc(170 * var(--s)); height: calc(213 * var(--s)); }
  .mc-g { left: calc(20 * var(--s)); top: calc(1235 * var(--s)); width: calc(80 * var(--s)); height: calc(103 * var(--s)); }

  .mobile-legend { position: absolute; left: calc(20 * var(--s)); top: calc(1611 * var(--s)); width: calc(350 * var(--s)); height: calc(59 * var(--s)); }
  .mobile-legend img { position: absolute; left: 0; top: 0; width: calc(105 * var(--s)); height: calc(39 * var(--s)); }
  .mobile-legend h1 { position: absolute; left: 0; top: calc(24 * var(--s)); width: calc(341 * var(--s)); padding-left: calc(35 * var(--s)); font-size: calc(20 * var(--s)); line-height: 1; letter-spacing: calc(-.4 * var(--s)); font-weight: 600; }

  .mobile-story-one,
  .mobile-story-two { position: absolute; left: calc(20 * var(--s)); width: calc(350 * var(--s)); font-size: calc(14 * var(--s)); line-height: 1.07; letter-spacing: calc(-.28 * var(--s)); }
  .mobile-story-one { top: calc(1696 * var(--s)); }
  .mobile-story-two { top: calc(2175 * var(--s)); }

  .mobile-web-scene { position: absolute; left: calc(-23 * var(--s)); top: calc(1916 * var(--s)); width: calc(413 * var(--s)); height: calc(269 * var(--s)); overflow: hidden; }
  .mobile-web-scene .web-photo { position: absolute; left: calc(23 * var(--s)); top: 0; width: calc(390 * var(--s)); height: calc(209 * var(--s)); object-fit: cover; }
  .mobile-web-scene .web-overlay { position: absolute; inset: 0; width: 100%; height: 100%; }

  .mobile-final-left,
  .mobile-final-right { position: absolute; top: calc(2411 * var(--s)); width: calc(170 * var(--s)); height: calc(158 * var(--s)); overflow: hidden; }
  .mobile-final-left { left: calc(20 * var(--s)); }
  .mobile-final-right { left: calc(200 * var(--s)); }
  .mobile-final-left img,
  .mobile-final-right img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }

  .mobile-sword-stage { left: 0; top: calc(2570 * var(--s)); width: 100%; height: calc(140 * var(--s)); }
  .mobile-sword-stage .sword { left: calc(20 * var(--s)); top: calc(49 * var(--s)); width: calc(350 * var(--s)); height: calc(83 * var(--s)); transform: translateX(125%); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .grain, .hero-flicker { animation: none; }
  .js .reveal { transition-duration: .01ms; transform: none; }
  .blood.is-visible { animation: none; opacity: 1; }
  .sword-stage.is-fired .sword { animation: none; opacity: 1; transform: none; }
}

@keyframes bloodImpact {
  0% { opacity: 0; transform: scale(1.1); }
  38% { opacity: 1; transform: scale(.985); }
  62% { opacity: .84; transform: scale(1.014); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes bloodBreathe {
  from { filter: saturate(.84) brightness(.78); }
  to { filter: saturate(1.05) brightness(.93); }
}

@keyframes impactFlash {
  0%, 100% { opacity: 0; }
  38% { opacity: .16; }
  62% { opacity: .03; }
}

@keyframes swordStrike {
  0% { opacity: 0; transform: translateX(125%) rotate(.8deg); }
  8% { opacity: 1; }
  78% { transform: translateX(-1.5%) rotate(-.25deg); }
  100% { opacity: 1; transform: translateX(0) rotate(0); }
}

@keyframes swordShiver {
  0% { filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
  45% { filter: drop-shadow(0 0 15px rgba(255,255,255,.55)); }
  100% { filter: drop-shadow(0 0 3px rgba(255,255,255,.18)); }
}

@keyframes candleFlicker {
  0%, 91%, 100% { opacity: 1; }
  92% { opacity: .62; }
  94% { opacity: .92; }
  96% { opacity: .76; }
}

@keyframes grainShift {
  0% { transform: translate3d(-1%, -1%, 0); }
  25% { transform: translate3d(1%, 0, 0); }
  50% { transform: translate3d(0, 1%, 0); }
  75% { transform: translate3d(-1%, 1%, 0); }
  100% { transform: translate3d(1%, -1%, 0); }
}