:root{--bg:#2b2b2b;--red:#df1c18}
*{box-sizing:border-box;margin:0}
html,body{overflow-x:clip}
body{background:var(--bg);color:#fff;font-family:system-ui,sans-serif}

/* Static background layer: fixed to the viewport, content scrolls over it.
   A fixed element (not background-attachment:fixed) also works on iOS. */
.page-bg{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:url(../img/bg-halftone.webp) center/cover no-repeat;
  opacity:.11; /* same strength as the original PNG */
}

/* Header: poster top band; logo pieces placed in % of header.png (3090 x 1409) */
.site-header{position:relative;width:100%;overflow:hidden}
.site-header .header-inner{position:relative}
.site-header .header-img{display:block;width:100%;height:auto}
.site-header .logo{position:absolute;inset:0;margin:0}
.site-header .logo img{position:absolute;height:auto}
.logo .henkel{left:7.702%;top:18.950%;width:38.447%}
.logo .is{left:46.019%;top:27.253%;width:11.618%}
.logo .not{left:7.735%;top:46.132%;width:22.945%}
.logo .dead{left:31.359%;top:43.648%;width:31.392%}

/* Logo: lively punk motion. Each piece has its own pulse with a slight
   jerky edge (CSS); JS adds occasional random kicks so it never feels looped. */
.logo img{transform-origin:50% 50%;will-change:transform,filter}
.logo .henkel{animation:pulse-a 1.2s steps(6) infinite}
.logo .is{animation:pulse-b .9s cubic-bezier(.3,1.6,.5,1) infinite;animation-delay:-.3s}
.logo .not{animation:pulse-c 1.05s steps(5) infinite;animation-delay:-.7s}
.logo .dead{animation:pulse-d .6s steps(2,jump-none) infinite;animation-delay:-.2s}

@keyframes pulse-a{
  0%,100%{transform:scale(1) rotate(0)}
  50%{transform:scale(1.09) rotate(-2.5deg) translateY(-1.5%)}
}
@keyframes pulse-b{
  0%,55%,100%{transform:scale(1) rotate(0)}
  20%{transform:scale(1.28) rotate(12deg)}
}
@keyframes pulse-c{
  0%,45%,100%{transform:scale(1) rotate(0)}
  12%{transform:scale(1.12) rotate(-4.5deg) skewX(-5deg)}
  24%{transform:scale(.98) rotate(1deg)}
  34%{transform:scale(1.1) rotate(3deg) skewX(4deg)}
}
@keyframes pulse-d{
  0%{transform:scale(1) rotate(0)}
  100%{transform:scale(1.07) rotate(3deg) translate(.8%,-2.5%)}
}
/* short RGB-split glitch flash, added by JS */
.logo img.glitch{filter:drop-shadow(4px 0 0 #00e5ff) drop-shadow(-4px 0 0 #ff2d9b)}

@media (prefers-reduced-motion:reduce){
  .logo img{animation:none}
}

/* Sizes follow the poster: 1 poster px (of 3089) = 100vw / 3089 */
.cond{font-family:"Archivo",sans-serif;font-stretch:62%;font-weight:800;line-height:1.2}

/* Intro: two text columns */
.intro{display:grid;grid-template-columns:54fr 46fr;column-gap:4vw;padding:4.5vw 4.5vw 3.6vw}
.intro h2{color:var(--red);font-size:clamp(30px,3.9vw,72px);margin-bottom:.45em}
.intro p{color:var(--red);font-family:"Archivo",sans-serif;font-size:clamp(17px,2vw,36px);line-height:1.25}
.intro .where{color:var(--red);font-size:clamp(28px,3.4vw,64px);text-transform:uppercase;padding-top:2.5vw}
.intro .where span{display:block;text-transform:none}

/* Dress code: red slab behind, photos left, text column right */
.dress{position:relative;isolation:isolate;display:grid;grid-template-columns:55fr 45fr;column-gap:3vw;padding:0 0 0 2vw}
.dress::before{content:"";position:absolute;left:0;right:0;top:4.76vw;bottom:2.88vw;z-index:-1;
  background:url(../img/dress/dress-bg.png) center/100% 100% no-repeat}
.photos{position:relative;aspect-ratio:1697/1292}
.photos img{position:absolute;height:auto}
.photos .man{left:0;top:0;width:55.2%}
.photos .woman{left:47.3%;top:4.4%;width:52.3%}

/* Photos: quick, small pulse; both the same, just slightly out of sync. */
.photos img{transform-origin:50% 50%;animation:photo-pulse .8s ease-in-out infinite}
.photos .woman{animation-delay:-.4s}
@keyframes photo-pulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.025)}
}
/* Hover: the active photo comes forward (front, bigger, tilted, hard shadow), the other dims.
   Uses the separate scale/rotate properties so the pulse animation keeps running. */
.photos img{transition:scale .35s cubic-bezier(.3,1.6,.5,1),rotate .35s cubic-bezier(.3,1.6,.5,1),filter .3s ease}
.photos:has(img:hover) img{filter:grayscale(.8) brightness(.55)}
.photos:has(img:hover) img:hover{z-index:2;scale:1.1;rotate:-2deg;filter:drop-shadow(10px 12px 0 rgba(0,0,0,.6))}
.photos:has(img:hover) .woman:hover{rotate:2deg}
@media (prefers-reduced-motion:reduce){
  .photos img{animation:none;transition:filter .3s ease}
  .photos:has(img:hover) img:hover{scale:none;rotate:none}
}
.dress-text{padding:9vw 4vw 6vw 0}
.dress-text h2{color:#0d0d0d;font-size:clamp(34px,4.7vw,90px);line-height:1.2;text-transform:uppercase;margin-bottom:.5em}
.dress-text h2 span{display:block;text-transform:none}
.dress-text p{color:#fff;font-family:"Archivo",sans-serif;font-size:clamp(17px,1.9vw,36px);line-height:1.25}

/* Rating: 3 columns, text spans columns 1-2, column 3 left free */
.rating{display:grid;grid-template-columns:1fr 1fr 1.2fr;column-gap:3vw;align-items:start;padding:9vw 4.5vw 0 11.9vw}
.rating .text{grid-column:1 / 3}
.rating h2{color:var(--red);font-size:clamp(28px,3.25vw,62px);line-height:1.25;text-transform:uppercase;margin-bottom:1em}
.rating p{color:#fff;font-family:"Archivo",sans-serif;font-size:clamp(17px,2vw,38px);line-height:1.37}
.rating .col3{margin-top:-10vw;position:relative;z-index:10}
.rating .col3 img{display:block;width:100%;height:auto;animation:photo-pulse .8s ease-in-out infinite;animation-delay:-.2s}
@media (prefers-reduced-motion:reduce){
  .rating .col3 img{animation:none}
}

/* MIG 21: red band behind; poster layout scaled to 3/4 height (logo keeps its centre) */
.mig{position:relative;isolation:isolate;display:grid;grid-template-columns:1373fr 436fr 1280fr;padding-bottom:2.25vw;margin-top:-1vw}
.mig::before{content:"";position:absolute;left:0;right:0;top:0;height:23.31vw;z-index:-1;
  background:url(../img/mig/mig-bg.png) center/100% 100% no-repeat}
.mig .col2{padding-top:1.63vw}
.mig .col3{padding:4.1vw 0 0 1.2vw}
.mig .col2 img{display:block;width:100%;height:auto}
.mig .col3 img{display:block;width:72%;height:auto}

/* entrance when the section scrolls into view (class added by JS) */
.mig .col2,.mig .col3{transition:transform .9s cubic-bezier(.2,1.4,.4,1),opacity .6s ease}
.mig:not(.in) .col2{transform:translateY(-40%) rotate(-12deg) scale(1.3);opacity:0}
.mig:not(.in) .col3{transform:translateX(60%) rotate(10deg);opacity:0}
.mig .col3{transition-delay:.25s}

/* loops: logo thumps on the beat, band photo sways */
.mig .col2 img{animation:mig-beat .5s cubic-bezier(.2,.8,.3,1) infinite}
.mig .col3 img{transform-origin:20% 80%;animation:mig-sway 2s ease-in-out infinite}
@keyframes mig-beat{
  0%{transform:scale(1.06)}
  30%,100%{transform:scale(1)}
}
@keyframes mig-sway{
  0%,100%{transform:rotate(0) scale(1)}
  50%{transform:rotate(-2deg) scale(1.03)}
}
@media (prefers-reduced-motion:reduce){
  .mig .col2 img,.mig .col3 img{animation:none}
  .mig .col2,.mig .col3{transition:none}
  .mig:not(.in) .col2,.mig:not(.in) .col3{transform:none;opacity:1}
}

/* Harmonogram: heading + list of time / programme rows */
.schedule{padding:3vw 4.5vw 4vw 11.9vw}
.schedule h2{color:var(--red);font-size:clamp(28px,3.25vw,62px);line-height:1.25;text-transform:uppercase;margin-bottom:.5em}
.schedule ul{list-style:none;margin:0;padding:0}
.schedule li{display:grid;grid-template-columns:4em 1fr;column-gap:1em;align-items:baseline;padding:.34em 0;border-bottom:1px solid rgba(255,255,255,.15);
  color:#fff;font-family:"Archivo",sans-serif;font-size:clamp(17px,2vw,38px);line-height:1.37}
.schedule time{color:var(--red);font-size:1.35em;font-stretch:62%;font-weight:800;line-height:1}

/* Signup: red band with call to action + form */
.signup{background:var(--red);padding:5vw 4.5vw 6vw 11.9vw;color:#fff}
.signup h2{color:#0d0d0d;font-size:clamp(34px,4.7vw,90px);line-height:1.1;text-transform:uppercase;margin-bottom:.5em}
.signup form{display:grid;grid-template-columns:1fr 1fr 1.4fr auto;gap:1vw;font-family:"Archivo",sans-serif;font-size:clamp(16px,1.3vw,24px)}
.signup label{display:flex;flex-direction:column;gap:.3em;font-weight:700;text-transform:uppercase;font-size:.8em}
.signup input{font:inherit;font-size:1.25em;text-transform:none;font-weight:400;color:#fff;background:#2b2b2b;border:2px solid #0d0d0d;padding:.55em .7em;border-radius:0}
.signup input:focus{outline:3px solid #fff;outline-offset:0}
/* browser autofill paints its own (white/blue) background - keep the dark field */
.signup input{color-scheme:dark}
/* separate rules: a browser that doesn't know one selector would drop the whole group */
.signup input:-webkit-autofill,.signup input:-webkit-autofill:hover,.signup input:-webkit-autofill:focus{
  -webkit-text-fill-color:#fff;caret-color:#fff;-webkit-box-shadow:0 0 0 1000px #2b2b2b inset;box-shadow:0 0 0 1000px #2b2b2b inset;
  filter:none;transition:background-color 9999s ease-out 0s}
.signup input:autofill{
  -webkit-text-fill-color:#fff;caret-color:#fff;-webkit-box-shadow:0 0 0 1000px #2b2b2b inset;box-shadow:0 0 0 1000px #2b2b2b inset;
  filter:none;transition:background-color 9999s ease-out 0s}
.signup button{align-self:end;font-family:"Archivo",sans-serif;font-stretch:62%;font-weight:800;font-size:1.9em;text-transform:uppercase;
  color:#fff;background:#0d0d0d;border:0;padding:.25em 1.1em;cursor:pointer;transform:rotate(-2deg);transition:transform .15s ease,background .15s ease}
.signup button:hover,.signup button:focus-visible{background:#fff;color:var(--red);transform:rotate(1deg) scale(1.06)}
.signup .thanks{grid-column:1 / -1;font-family:"Archivo",sans-serif;font-stretch:62%;font-weight:800;font-size:clamp(26px,3vw,56px);text-transform:uppercase;color:#0d0d0d}

/* red text on the halftone needs a dark halo to stay readable */
.intro h2,.intro p,.intro .where,.rating h2,.schedule h2{text-shadow:0 1px 2px rgba(0,0,0,.9),0 0 10px rgba(0,0,0,.6)}

/* Mobile + tablet (up to 1024px): single-column layout */
@media (max-width:1024px){
  .intro,.dress{grid-template-columns:1fr}
  .intro{row-gap:32px;padding:40px 16px}
  .intro h2{font-size:34px}
  .intro p{font-size:18px;line-height:1.45;font-weight:600}
  .intro .where{padding-top:0;font-size:30px}
  .dress{padding:0 16px}
  .dress::before{top:12%;bottom:0}
  .dress-text{padding:24px 0 48px}
  .dress-text h2{font-size:38px}
  .dress-text p{font-size:18px;line-height:1.45}
  .rating{grid-template-columns:1fr;row-gap:28px;padding:48px 16px}
  .rating h2{font-size:30px;margin-bottom:.6em}
  .rating p{font-size:18px;line-height:1.45}
  .rating .text{grid-column:auto}
  .rating .col3{margin-top:0;width:60%;justify-self:center}
  /* text blocks: centered headings, justified paragraphs with side padding */
  .schedule{padding:32px 16px}
  .schedule h2{font-size:30px;margin-bottom:.6em;text-align:center}
  .schedule ul{padding:0 6%}
  .schedule li{grid-template-columns:3.6em 1fr;font-size:clamp(17px,3vw,21px);line-height:1.4}
  .signup{padding:48px 16px 56px}
  .signup h2{font-size:42px;text-align:center}
  .signup form{grid-template-columns:1fr;gap:16px;padding:0 6%;font-size:17px}
  .signup button{justify-self:center;margin-top:8px}
  .signup .thanks{text-align:center}
  /* MIG 21: one column, big band photo on top, logo below */
  /* red band wraps the whole block; logo overlaps the photo's lower edge */
  .mig{grid-template-columns:1fr;justify-items:center;padding:9% 6% 5%;margin:24px 0}
  .mig::before{top:0;height:auto;bottom:0}
  .mig .col1{display:none}
  .mig .col3{order:-1;width:100%;padding:0}
  .mig .col3 img{width:100%}
  .mig .col2{width:20%;padding:0;margin-top:-15%;position:relative;z-index:1}
  .intro h2,.intro .where,.dress-text h2,.rating h2{text-align:center}
  .intro p,.dress-text p,.rating p{text-align:justify;padding:0 6%;font-size:clamp(17px,3vw,21px);line-height:1.5}
  /* one continuous justified block (no forced line break) */
  .dress-text p br{display:none}
  .dress-text p{padding-bottom:2rem}
}

/* Tablet only: more breathing room, images not too large */
@media (min-width:761px) and (max-width:1024px){
  .intro,.rating{padding-left:8%;padding-right:8%}
  .dress{padding-left:8%;padding-right:8%}
  .photos{width:85%;justify-self:center}
  .mig .col2{width:14%;margin-top:-10%}
}

/* Phone only: zoom the header in on the logo + face so it isn't tiny (crops sides) */
@media (max-width:760px){
  .site-header .header-inner{width:128%;margin-left:-4%}
}


/* Signup: error message from the server */
.signup .error{grid-column:1 / -1;font-family:"Archivo",sans-serif;font-weight:700;color:#fff;background:#0d0d0d;padding:.6em .9em}