/* ==========================================================================
   New World Festival - 2027 holding page
   Sampled, not invented: every colour below is read out of the event artwork
   (assets/images/bg-desktop.jpg) or off the printed poster lockup.
   ========================================================================== */

@font-face{
  font-family:'Poppins'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/assets/fonts/Poppins-400.woff2?v=20260831-6') format('woff2');
}
@font-face{
  font-family:'Poppins'; font-style:normal; font-weight:600; font-display:swap;
  src:url('/assets/fonts/Poppins-600.woff2?v=20260831-6') format('woff2');
}

:root{
  --slate:#181D27;   /* the artwork's dominant dark, used as the page ground */
  --ink:#0E1119;     /* deepest note, for the scrim and the bottom ramp */
  --mist:#C4B2A6;    /* the warm dust haze in front of the arch */
  --mist-lt:#EADFD6; /* the same haze lifted for small type */
  --white:#FFFFFF;   /* exactly the wordmark's white */
  --gold:#FFDB7E;    /* the poster's only accent, the MAIN STAGE tag */
  --navy:#002854;    /* the ink inside the poster's own ticket buttons */

  /* Artwork aspect ratios. The composition is positioned in percentages of
     the IMAGE, so these two numbers drive the whole layout. */
  --ar-desktop:1.7777778;  /* 1920 / 1080 */
  --ar-mobile:0.5625;      /* 1080 / 1920 */
  --ar:var(--ar-desktop);
}

*,*::before,*::after{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--slate);
  color:var(--white);
  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}

.frame{position:fixed;inset:0;overflow:hidden;}

/* --------------------------------------------------------------------------
   The stage. Both layers are sized to EXACTLY the artwork's aspect ratio and
   scaled to cover the viewport, then centred. Because the two max() pairs
   always resolve to the same ratio, the image is never distorted and the
   content layer sits in perfect register with it. That is what lets the logo
   stay on the viaduct crown and the message stay inside the arch at every
   viewport shape, which background-size:cover alone cannot promise.
   -------------------------------------------------------------------------- */
.stage,.content{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:max(100vw, calc(100vh * var(--ar)));
  height:max(100vh, calc(100vw / var(--ar)));
}
@supports (height:100lvh){
  .stage,.content{
    width:max(100vw, calc(100lvh * var(--ar)));
    height:max(100lvh, calc(100vw / var(--ar)));
  }
}
.stage{
  background:var(--slate) url('/assets/images/bg-desktop.jpg?v=20260831-6') center/100% 100% no-repeat;
}
.content{container-type:size;}

/* Bloom and scrim, both measured off the image.
   The mist bloom at 79% down the desktop crop is the brightest thing in the
   frame. It is the stage light, so the page-load moment lets it settle rather
   than animating anything decorative. */
.bloom,.scrim{position:absolute;inset:0;pointer-events:none;}
.bloom{
  background:radial-gradient(ellipse 38% 20% at 50% 79%,
    rgba(255,219,126,.34) 0%, rgba(255,219,126,.10) 45%, rgba(255,219,126,0) 72%);
  opacity:1;
  animation:bloom-settle 2.8s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes bloom-settle{to{opacity:.34;}}
/* Radial over the arch void so white type clears the mid-tone stone, plus a
   bottom ramp so the footer clears the busy crowd. */
.scrim{
  background:
    radial-gradient(ellipse 40% 32% at 50% 47%,
      rgba(14,17,25,.56) 0%, rgba(14,17,25,.34) 46%, rgba(14,17,25,0) 74%),
    linear-gradient(to bottom, rgba(14,17,25,0) 72%, rgba(14,17,25,.72) 100%);
}

/* --------------------------------------------------------------------------
   Composition. Percentages are of the artwork, taken from a brightness read of
   the image: the viaduct stone runs y17-28% (dark, so the white wordmark needs
   no scrim), the arch void y33-65% (mid), the mist bloom y70-88% (brightest,
   left deliberately clear), the crowd y90%+ (dark again).
   -------------------------------------------------------------------------- */
.brand,.message,.cta-wrap{
  position:absolute; left:50%; transform:translateX(-50%);
  opacity:0; animation:rise .9s cubic-bezier(.22,.61,.36,1) forwards;
}
/* The footer is full-bleed, so it must never join the centring group above:
   translateX(-50%) on a 100%-wide bar slides it half a viewport left, and
   .frame's overflow:hidden then clips it out of sight entirely. It gets its
   own entrance that only moves on Y. */
.foot{opacity:0; animation:rise-flat .9s cubic-bezier(.22,.61,.36,1) .9s forwards;}
@keyframes rise-flat{
  from{opacity:0;transform:translateY(1.2rem);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes rise{
  from{opacity:0;transform:translateX(-50%) translateY(1.2rem);}
  to{opacity:1;transform:translateX(-50%) translateY(0);}
}

.brand{top:16%; width:30%; height:auto; animation-delay:.15s;}

.message{top:35%; margin:0; width:92%; max-width:94vw; text-align:center; animation-delay:.45s;}
.message__thanks{
  display:block; font-weight:600; text-transform:uppercase;
  letter-spacing:.01em; line-height:1;
  font-size:8.6vh;                     /* fallback for no container queries */
  text-shadow:0 .02em .09em rgba(14,17,25,.42);
}
.message__year{
  display:block; margin-top:3.4%; color:var(--mist-lt);
  font-weight:400; text-transform:uppercase; line-height:1.2;
  font-size:2.3vh;                     /* fallback */
  letter-spacing:.36em; text-indent:.36em;  /* indent cancels the trailing track */
}

/* Solid block = a transaction. That is the poster's own grammar: its Skiddle
   and See Tickets buttons are solid, its information boxes are keylines. There
   is exactly one transaction on this page, so it gets the one solid block and
   the one use of gold. */
/* The entrance animation lives on the WRAPPER, never on the link itself. An
   animation with fill-mode:forwards keeps writing the element's transform
   after it ends, and an animation's value outranks a normal declaration, so a
   :hover transform on the same element is silently dead. Splitting the two
   keeps the lift working. */
/* flex, not inline centring: an inline-flex link on a text baseline adds a
   descender gap under the button. No line-height:0 here either, it inherits
   into .cta and collapses the label's box so the text spills past the edge. */
.cta-wrap{top:60%; animation-delay:.7s; width:100%; display:flex; justify-content:center;}
/* The label carries the weight, not the padding. An earlier pass had 27px type
   floating in a 98px-tall block, which read as an empty yellow slab rather than
   a button. Type is sized first and the padding is derived from it. */
.cta{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--gold); color:var(--navy);
  text-decoration:none; font-weight:600; text-transform:uppercase; white-space:nowrap;
  line-height:1.2;                     /* explicit: never inherit a collapsed one */
  font-size:3vh;                       /* fallback */
  letter-spacing:.06em; text-indent:.06em;
  padding:2.3vh 3.6vh;
  max-width:94vw;
  border-radius:4px;
  transition:background-color .2s ease, transform .2s ease;
}
.cta:hover,.cta:focus-visible{background:#FFE7A4;transform:translateY(-2px);}
.cta:focus-visible{outline:2px solid var(--white);outline-offset:4px;}
.cta:active{transform:translateY(0);}

/* House footer: the same 100%-width bar every Furiosa site carries, pinned to
   the VIEWPORT rather than to the artwork. Keeping it out of the stage-locked
   layer is deliberate: an artwork-anchored footer falls off the bottom edge on
   a landscape phone, where the stage is taller than the viewport. */
.foot{
  position:absolute; left:0; right:0; bottom:0; width:100%; z-index:2;
  margin:0;
  padding:14px clamp(16px,4vw,40px) calc(16px + env(safe-area-inset-bottom));
  border-top:1px solid rgba(255,219,126,.20);
  background:rgba(14,17,25,.72);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap;
}
.foot__left{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.foot__legal{margin:0;font-size:12px;color:var(--mist);letter-spacing:.02em;}
.foot__legal a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(196,178,166,.42);padding-bottom:1px;}
.foot__legal a:hover,.foot__legal a:focus-visible{color:var(--white);border-bottom-color:var(--white);}
.foot__legal a:focus-visible{outline:2px solid var(--white);outline-offset:3px;border-radius:2px;}
.site-built{margin:0;}
.site-built a{
  display:inline-flex; align-items:center; gap:7px;
  font-size:11px; letter-spacing:.04em; color:var(--mist);
  text-decoration:none; padding:5px 11px;
  border:1px solid rgba(255,255,255,.16); border-radius:999px;
  transition:border-color .15s ease, color .15s ease;
}
.site-built a:hover,.site-built a:focus-visible{border-color:var(--gold);color:var(--white);}
.site-built a:focus-visible{outline:2px solid var(--white);outline-offset:3px;}
.site-built img{display:block;height:14px;width:auto;opacity:.9;}

/* Container-query sizing. Everything above carries a vh fallback so an old
   engine still renders a sane page; where cq units exist the type scales with
   the ARTWORK instead of the viewport, which is the whole point of the stage. */
@supports (font-size:1cqh){
  .message__thanks{font-size:min(8.9cqh,16cqw,15vw);}
  .message__year{font-size:min(2.32cqh,4.4cqw);}
  /* vw is inside the min() on purpose: the stage is wider than the viewport on
     narrow windows, so a purely stage-relative label gets cropped at the edges. */
  .cta{font-size:min(3.15cqh,5.6cqw,3.4vw);padding:2.4cqh 3.7cqh;}
}

/* --------------------------------------------------------------------------
   Portrait phones and tall windows: swap to the portrait crop AND to its own
   composition. The two crops frame the arch differently, so they do not share
   coordinates. 7/10 is the house threshold: it leaves no gap between the
   orientation cases the way a width breakpoint does.
   -------------------------------------------------------------------------- */
@media (max-aspect-ratio:7/10){
  :root{--ar:var(--ar-mobile);}
  .stage{background-image:url('/assets/images/bg-mobile.jpg?v=20260831-6');}
  .bloom{background:radial-gradient(ellipse 46% 12% at 50% 67%,
    rgba(255,219,126,.34) 0%, rgba(255,219,126,.10) 45%, rgba(255,219,126,0) 72%);}
  .scrim{
    background:
      radial-gradient(ellipse 44% 18% at 50% 42%,
        rgba(14,17,25,.54) 0%, rgba(14,17,25,.32) 46%, rgba(14,17,25,0) 74%),
      linear-gradient(to bottom, rgba(14,17,25,0) 77%, rgba(14,17,25,.86) 100%);
  }
  .brand{top:17.2%; width:61%;}
  .message{top:34.5%;}
  .message__year{margin-top:2.4%;}
  /* Down on the crowd, well clear of the bloom. The empty band between the
     message and the button is the stage light, left alone on purpose. */
  .cta-wrap{top:68%;}
  /* 30 characters must be free to wrap rather than be clipped on a tall phone. */
  .cta{white-space:normal; text-align:center; line-height:1.3;}
  @supports (font-size:1cqh){
    .message__thanks{font-size:min(5.42cqh,12cqw,11.5vw);}
    .message__year{font-size:min(1.6cqh,3.4cqw);}
    .cta{font-size:min(2.08cqh,4.4vw);padding:1.5cqh min(2.3cqh,3vw);}
  }
}

/* --------------------------------------------------------------------------
   Landscape phones. A 390px-tall viewport cannot afford an artwork-locked
   composition: the stage is taller than the viewport, so anything anchored
   near 92% falls off the bottom edge. Here the artwork drops back to being a
   backdrop and the content becomes a plain centred column, which is always
   fully visible.
   -------------------------------------------------------------------------- */
@media (max-height:520px){
  .content{
    top:auto; left:auto; transform:none;
    inset:0; width:auto; height:auto;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:2.4vh;
    padding:2vh max(3vw, env(safe-area-inset-left)) calc(58px + env(safe-area-inset-bottom));
  }
  .brand,.message,.cta-wrap{position:static;transform:none;}
  @keyframes rise{
    from{opacity:0;transform:translateY(1.2rem);}
    to{opacity:1;transform:translateY(0);}
  }
  .brand{width:min(30vh,34vw);}
  .message{width:auto;}
  .message__thanks{font-size:min(8vh,5.5vw);}
  .message__year{font-size:min(2.6vh,1.9vw);margin-top:1.2vh;}
  .cta{font-size:min(3.4vh,2.4vw);padding:1.8vh 3vh;}
  @supports (font-size:1cqh){
    .message__thanks{font-size:min(8cqh,5.5cqw);}
    .message__year{font-size:min(2.6cqh,1.9cqw);}
    .cta{font-size:min(3.4cqh,2.4cqw);padding:1.8cqh 3cqh;}
  }
}

/* Below this width the footer can no longer sit on one row. Left-aligned wrap
   looked accidental, so it becomes a deliberate centred stack instead. */
@media (max-width:640px){
  .foot{
    flex-direction:column; align-items:center; justify-content:center;
    gap:10px; text-align:center;
    padding:12px 16px calc(14px + env(safe-area-inset-bottom));
  }
  .foot__left{flex-direction:column; align-items:center; gap:10px;}
}

@media (prefers-reduced-motion:reduce){
  .brand,.message,.cta-wrap,.foot{animation:none;opacity:1;}
  .bloom{animation:none;opacity:.34;}
  .cta{transition:background-color .2s ease;}
  .cta:hover,.cta:focus-visible{transform:none;}
}