/*
 * Global styles for the MUX landing page.
 * The design takes inspiration from the provided mock‑ups and assets.
 * Colours, typography and motion are tailored to create an immersive
 * experience that evokes the feel of an exclusive cocktail event.
 */

/* Reset default margins and paddings and set box sizing. */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* Prevent hyphenation across all text to ensure clean line breaks on
     both desktop and mobile. Without this, the browser may insert
     hyphenation points automatically when words wrap. */
  hyphens: none;
}

html,
body {
  height: 100%;
  font-family: 'Bebas Neue', sans-serif;
  color: #ffffff;
  /* allow scrolling when vertical space is constrained */
  overflow-y: auto;

  /* Prevent text and images from being selected. This ensures the interactive
     experience feels more like a fluid canvas and avoids accidental
     text highlighting when the user drags the background colours. */
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

/* Desktop offset to keep main content below the nav (adjustable) */
:root {
  --desktop-nav-offset: 140px;
  /* Adjust the lift on desktop so the heading and subheading sit closer
     together vertically. Bringing them closer improves visibility on a
     1920×1080 screen without crowding the centre object. */
  /* Further lift the desktop text slightly so the heading and subheading occupy
     less vertical space and remain visible together on a 1920×1080 screen. A
     more negative value moves the text up; adjust modestly to avoid crowding
     the centre object. */
  /* Desktop offsets for headline and subheading on large screens. These values
     control how far up or down each text block sits relative to the vertical
     centre of the page. Negative values lift content upwards, positive values
     push it downward. Adjust these to match the supplied mock‑up.
   */
  --desktop-left-lift: -200px;
  --desktop-right-lift: 200px;
  --mobile-nav-offset: 180px; /* used on small screens so content sits below fixed nav */
  --footer-height: 72px; /* reserve space for footer on small screens */
}

/* Use Poppins (geometric, extended feel) for UI elements like the nav menu */
nav .menu,
nav .menu li {
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  font-stretch: expanded;
}

/* Animated gradient background. The gradient colours are inspired by the provided background artwork.
   The background transitions slowly over time to produce a subtle movement without distracting the viewer. */
.background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -3;
  pointer-events: none;
  overflow: hidden;
}

/* Rotatable gradient layer so we can change the angle smoothly by rotating the layer.
   We keep the animation of gradient-position on the pseudo element. */
.background::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Fixed linear gradient based on the original MUX theme.  The angle and
     colour stops replicate the pre‑revision design: a diagonal blend of
     crimson (#EF220C), deep purple (#1d1230) and cyan (#00FFFE).
     The gradient is intentionally oversized (200%×200%) so that shifting
     the background position reveals different portions of the same palette. */
  background: linear-gradient(135deg, #EF220C 0%, #1d1230 50%, #00FFFE 100%);
  background-size: 200% 200%;
  /* The x/y positions are controlled via CSS custom properties.  Values
     are updated by JavaScript on each navigation click to pan the gradient
     smoothly across its oversized canvas.  Default to the left/midpoint. */
  background-position: var(--bg-pos-x, 0%) var(--bg-pos-y, 50%);
  /* Only animate the change in background position.  This ensures the
     colours and angle remain constant while the gradient slides into
     a new view on nav interactions. */
  transition: background-position 900ms ease-in-out;
  /* Preserve stacking order behind all content. */
  z-index: -3;
}

@keyframes gradientMove {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Background title positioned centrally. Semi‑transparent so it sits behind the main content. */
.bg-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 1200px;
  opacity: 0.08;
  z-index: -1;
  pointer-events: none;
}

/* Navigation bar styling. It floats at the top of the viewport. */
header {
  /* make header fixed so it always masks page content while scrolling */
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw; /* ensure full viewport width */
  right: 0;
  z-index: 9999; /* ensure header sits above all content */
  /* subtle backdrop so content underneath is visually masked */
  background: rgba(6, 6, 8, 0);
  display: flex; /* contain the nav and size to its children */
  align-items: center;
  box-sizing: border-box;
  min-height: var(--desktop-nav-offset); /* ensure visible height */
}

nav {
  position: relative; /* keep nav layout inside header the same */
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 48px; /* more breathing room */
}

/* Smooth transitions for header and center-overlay so they can hide/dim on scroll */
header, .center-overlay {
  transition: transform 280ms ease, opacity 280ms ease;
  will-change: transform, opacity;
}

/* Global hide rules: ensure the header and its nav/menu items are hidden whenever
   the JS toggles `body.hide-header`. This is global so it works on mobile and desktop. */
body.hide-header header,
body.hide-header header nav,
body.hide-header header .menu,
body.hide-header header .menu li {
  transform: translateY(-120%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Extra rule: header.hide (class applied directly to header) to ensure hiding works
   even if body class is not applied or has lower specificity. */
header.hide,
header.hide nav,
header.hide .menu,
header.hide .menu li {
  transform: translateY(-120%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

nav .logo img {
  height: 96px; /* increased size */
  width: auto;
  margin-left: 20px; /* ensure at least 20px left margin across breakpoints */
  margin-top: 12px; /* breathing from top */
  /* The logo remains completely static on hover and click. */
  transition: none;
}

/* Make the logo clickable: update cursor to pointer to indicate it leads
   back to the home/accueil section. */
nav .logo {
  cursor: pointer;
}

/* On hover, give the logo an overlay effect. We boost brightness and
   saturation and apply a subtle scale to draw attention. The blend mode
   change helps the logo interact with the gradient background, evoking
   an overlay feel. */
/* Remove the previously implemented hover effect on the logo. Instead of
   scaling and applying an overlay blend, the logo remains static on hover. */
nav .logo:hover img {
  transform: none;
  filter: none;
  mix-blend-mode: normal;
  opacity: 1;
}

nav .menu {
  list-style: none;
  display: flex;
  gap: 24px;
}

nav .menu li {
  cursor: pointer;
  font-size: 0.6rem; /* reduced ~20% for desktop */
  letter-spacing: 0.08rem;
  text-transform: uppercase;
  color: #ffffff; /* default white */
  /* faster hover response requested */
  transition: color 0.12s ease-in, opacity 0.12s ease-in;
  padding: 8px 12px; /* space for the hover outline */
  position: relative;
  z-index: 0; /* so ::after can be placed behind without covering text */
}

/* Slightly increase nav text on desktop by ~1.3% (0.6rem -> 0.608rem) */
@media (min-width: 750px) {
  /* Increase nav text on desktop to ~1.3x the base size for better legibility */
  nav .menu li {
    font-size: 0.79rem;
  }
}

/* Hover: change text colour to cyan, then show an outline (no border radius) */
nav .menu li:hover,
nav .menu li.active {
  color: #00FFFE;
}

/* Tracing outline: animate a cyan stroke from left to right using background-position */
nav .menu li::after {
  content: '';
  position: absolute;
  /* bring outline closer to the text (smaller rect) */
  inset: 4px 0px; /* 4px top/bottom inset, full left/right */
  pointer-events: none;
  box-sizing: border-box;
  /* finer outline stroke on hover */
  border: 0.5px solid transparent;
  /* match the faster feel for the outline */
  transition: border-color 0.12s ease-in, opacity 0.12s ease-in, transform 0.12s ease-in;
  z-index: -1; /* place behind text so it doesn't cover */
  opacity: 0; /* start hidden for fade-in */
}

nav .menu li:hover::after,
nav .menu li.active::after {
  border-color: #00FFFE;
  opacity: 1; /* fade in the outline */
}

/* Active menu item should not show the outline stroke — only cyan text */
nav .menu li.active::after {
  opacity: 0 !important;
  border-color: transparent !important;
}

/* Hover text color change to cyan with same easing */
nav .menu li:hover,
nav .menu li.active {
  color: #00FFFE;
  /* ensure smooth fade if needed */
  opacity: 1;
}

/* Triangles container. Individual triangles will animate independently to create a sense of movement in space. */
.triangle-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: -2;
}

.triangle-container .triangle {
  position: absolute;
  width: 200px;
  height: auto;
  opacity: 0.6; /* more visible */
  filter: blur(0.4px);
  mix-blend-mode: screen;
  will-change: transform;
  transform-origin: center center;
}

/* Define unique animations for each triangle. The animations translate the triangles across
   the viewport on different paths and durations. */
/* Anchor triangles near corners and reduce their motion so they don't drift across the center */
.triangle.t1 {
  top: 6%;
  left: 2%;
  /* allow JS to adjust small translations via CSS vars without overwriting rotation */
  transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0) rotate(6deg) scale(var(--s,1));
  /* no long CSS animation; small movement handled in JS for smooth parallax */
  animation: float1 6s ease-in-out infinite alternate;
}
.triangle.t2 {
  /* Shrink this blurred cyan triangle to 40% of previous size and center it */
  top: 50%;
  left: 50%;
  /* center the element first, then apply JS-controlled parallax translations */
  transform: translate(-50%, -50%) translate3d(var(--tx, 0px), var(--ty, 0px), 0) rotate(-6deg) scale(var(--s,1));
  /* reduced size so it no longer bleeds off-screen */
  width: 440px; /* 1100px * 0.4 = 440px */
  opacity: 0.28;
  filter: blur(1.5px);
  animation: float2 20s ease-in-out infinite alternate;
}
.triangle.t3 {
  top: 4%;
  right: 6%;
  transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0) rotate(2deg) scale(var(--s,1));
  /* small parallax handled in JS */
  width: 260px;
  animation: float3 8s ease-in-out infinite alternate;
}
.triangle.t4 {
  bottom: 4%;
  left: 6%;
  transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0) rotate(-2deg) scale(var(--s,1));
  /* small parallax handled in JS */
  width: 160px;
  animation: float4 5s ease-in-out infinite alternate;
}

/* Gentle float keyframes that include the JS-driven --tx/--ty so parallax and float combine */
@keyframes float1 {
  0% { transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0) translateX(-8px) translateY(6px) rotate(4deg); }
  50% { transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0) translateX(8px) translateY(-6px) rotate(8deg); }
  100% { transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0) translateX(-8px) translateY(6px) rotate(4deg); }
}
@keyframes float2 {
  0% { transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0) translateX(-20px) translateY(12px) rotate(-4deg); }
  50% { transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0) translateX(20px) translateY(-12px) rotate(-8deg); }
  100% { transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0) translateX(-20px) translateY(12px) rotate(-4deg); }
}
@keyframes float3 {
  0% { transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0) translateX(-6px) translateY(4px) rotate(1deg); }
  50% { transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0) translateX(6px) translateY(-4px) rotate(3deg); }
  100% { transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0) translateX(-6px) translateY(4px) rotate(1deg); }
}
@keyframes float4 {
  0% { transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0) translateX(-10px) translateY(6px) rotate(-2deg); }
  50% { transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0) translateX(10px) translateY(-6px) rotate(-1deg); }
  100% { transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0) translateX(-10px) translateY(6px) rotate(-2deg); }
}

/* Floating animation for the central object. Rather than altering the transform
   property (which could conflict with scaling or rotation set in other
   rules), this animation nudges the wrapper’s top margin over time. The
   effect is a slow, continuous rise and fall that gives each section a
   playful, floating feel on both desktop and mobile. */
@keyframes floatMargin {
  /* Deprecated: margin‑based floating animation retained for backwards
     compatibility but no longer applied. */
  0% { margin-top: 0px; }
  50% { margin-top: -20px; }
  100% { margin-top: 0px; }
}

/* Image floating animation.  Instead of animating the wrapper’s margin
   (which inadvertently pushed neighbouring text), this new keyframe
   applies a vertical translation directly to the image.  This keeps
   surrounding layout static while still giving the glass or icons a
   gentle bobbing motion. */
@keyframes floatImage {
  0% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
  100% { transform: translateY(0); }
}

/* Floating wrapper animation.  Combines the constant scale with a vertical
   translation so the wrapper appears to bob without affecting the page
   layout.  Because it manipulates `transform` instead of margins, the
   neighbouring text remains fixed. */
@keyframes floatWrapper {
  0% { transform: scale(1.2) translateY(0); }
  50% { transform: scale(1.2) translateY(-20px); }
  100% { transform: scale(1.2) translateY(0); }
}

/* Keyframes removed: triangle motion is driven by JS for cursor/device-controlled parallax. */

/* ------------------------------------------------------------------
   Glitch animation for the dress code carousel
   When cycling between dress code images, we apply a short glitch
   animation to the picture element.  This effect clips and jitters
   the image to emulate a digital glitch before swapping to the
   next slide.  The keyframes define several erratic translations
   and clip-paths; the animation is brief and uses a linear timing
   function to mimic sudden flickers. */
@keyframes glitch {
  0% {
    clip-path: inset(0 0 0 0);
    transform: translate(0, 0);
  }
  20% {
    clip-path: inset(10% 0 85% 0);
    transform: translate(-2px, -2px);
  }
  40% {
    clip-path: inset(15% 0 70% 0);
    transform: translate(2px, 2px);
  }
  60% {
    clip-path: inset(5% 0 80% 0);
    transform: translate(-2px, 1px);
  }
  100% {
    clip-path: inset(0 0 0 0);
    transform: translate(0, 0);
  }
}

/* Apply the glitch animation to the main object when cycling the dress
   images.  The 0.4s duration matches the JS delay when swapping
   images. */
.glitch {
  animation: glitch 0.4s linear;
}

/* Main content layout. Flexbox arranges the text and object side by side on larger viewports and
   stacks them vertically on smaller screens via a media query. */
main {
  position: relative;
  width: 100%;
  /* push main down so it sits below the nav and avoid overlap */
  margin-top: var(--desktop-nav-offset);
  /* allow content to grow and scroll if viewport is short */
  min-height: calc(100vh - var(--desktop-nav-offset));
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* left text, center object, right text */
  /* Align items vertically to the centre by default on desktop. Individual
     text blocks can then be shifted up or down via transforms for fine
     positioning. */
  align-items: center;
  gap: 20px;
  padding: 0px 80px;
  z-index: 5;
}

main .text-block {
  max-width: 520px;
}

main .text-block.left {
  text-align: right; /* left column text aligned to the right */
}

main .text-block.right {
  text-align: left;
  /* Align the right text higher on desktop to keep it closer to the left
     heading. By aligning to start and removing the top margin, both
     headings remain visible within a 1080px viewport. */
  align-self: start;
  margin-top: 0;
}

/* Desktop-only: lift both text blocks higher so they sit above center object
   without affecting mobile layouts (min-width matches mobile breakpoint + 1). */
@media (min-width: 750px) {
  /* On desktop, allow text blocks to align to the vertical middle of the
     content area and adjust their positions individually using the lift
     variables defined on :root. Left text is lifted slightly up and right
     text is pushed down to mirror the supplied visual. */
  .text-block.left {
    align-self: center;
    margin-top: 0;
  padding-left: 40px; /* push text right */
  }
  .text-block.right {
    align-self: center;
    margin-top: 0;
  padding-left: 40px; /* push text right */
  }

  /* Reconfigure the grid on desktop to better match the reference layout. The main
     area now consists of two rows: the first row holds the left text and the
     top portion of the glass, and the second row holds the right text and the
     bottom portion of the glass. The centre column spans both rows. */
  main {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 20px;
  }
  .text-block.left {
    grid-column: 1;
    grid-row: 1;
  }
  .center {
    grid-column: 2;
    grid-row: 1 / span 2;
    /* ensure the central object remains centred in the combined rows */
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .text-block.right {
    grid-column: 3;
    grid-row: 2;
  }

  /* Override subheading margin on desktop to remove default downward offset. */
  main #subheading {
    margin-top: 0;
  }
}

/* When the body has the no-left-text class (i.e., for sections other than
   accueil), restructure the layout on desktop so the image appears on the
   left and the subheading on the right. The left text block is hidden. */
@media (min-width: 750px) {
  body.no-left-text main {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto;
    align-items: center;
    gap: 40px;
  }
  body.no-left-text main .text-block.left {
    display: none !important;
  }
  body.no-left-text main .center {
    grid-column: 1;
    grid-row: 1;
    justify-content: center;
    align-items: center;
  }
  body.no-left-text main .text-block.right {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    margin-top: 0;
    text-align: left;
  padding-left: 40px; /* maintain rightward shift */
  }
}

/* For mobile/tablet widths (<750px), hide the left text and stack the image
   above the subheading when not on the accueil section. */
@media (max-width: 749px) {
  body.no-left-text main {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }
  body.no-left-text main .text-block.left {
    display: none !important;
  }
  body.no-left-text main .center {
    grid-column: 1;
    grid-row: 1;
    justify-content: center;
    align-items: center;
  }
  body.no-left-text main .text-block.right {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    margin-top: 20px;
    text-align: left;
  }

  /* Ensure the central images don’t dominate the viewport on mobile.  A
     maximum height prevents them from exceeding approximately half of
     most smartphone screens while still allowing responsive width. */
  main .object-wrapper img {
    max-height: 450px;
  }
}

/* Wider desktop band (750px - 1200px): increase headline and body sizes
   while giving text blocks more horizontal room so long lines don't wrap
   into 4+ lines. The JS `enforceMaxLines()` still guarantees <= 3 lines. */
@media (min-width: 750px) and (max-width: 1200px) {
  main {
    /* reduce side padding so text has more usable width */
    padding: 0 40px;
    gap: 28px;
    /* increase the minimum height on medium desktops so there is room to scroll
       and trigger the header fade-out behaviour. Without extra height the page
       remains pinned to one screen and the scroll listener never fires. */
    min-height: calc(130vh - var(--desktop-nav-offset));
  }

  main .text-block {
    /* Allow wider text columns on medium desktops so headings are not cramped but still constrained to a reasonable width. */
    max-width: 900px;
  }

  main h1 {
  /* Keep desktop font size constant (do not scale with viewport). */
  font-size: 3.375rem; /* locked size */
    line-height: 1.03;
  }

  main #subheading {
  font-size: 3.375rem; /* locked size to match heading */
    line-height: 1.04;
    max-width: 900px;
  }

  main p {
  font-size: 1.44rem; /* 10% reduction */
    line-height: 1.08;
  }

  /* Slightly reduce center overlay so large text remains dominant */
  .center-overlay {
    width: 64%;
    max-width: 420px; /* keep overlay smaller than the text block in this range */
  }
}

/* Move the subheading to the lower opposite side of the spinning glass */
main #subheading {
  margin: 0;
  /* match the main headline size and visual weight */
  font-size: 2.88rem; /* 10% reduction */
  line-height: 1.05;
  color: #ffffff;
  text-align: left;
  /* use the same tracking as the right-aligned headline (no extra letter-spacing) */
  letter-spacing: normal;
  /* constrain width so text breaks into 2-3 lines */
  max-width: 520px;
  white-space: normal;
  margin-top: 20px; /* lower in position */
}

/* Center overlay artwork for desktop */
.center-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Make the overlay artwork fill the viewport while preserving a 40px horizontal margin
    (left/right) and a 10px vertical margin. */
  width: calc(100vw - 80px);
  /* Cap growth at width reached at 990px viewport (990 - 80 = 910px). */
  max-width: 910px;
  max-height: calc(100vh - 20px);
  /* Allow natural height; the inner img will scale to fit via object-fit. */
  height: auto;
  pointer-events: none;
  z-index: 0; /* above background (-3) and below main (5) */
  opacity: 0.95;
  mix-blend-mode: overlay; /* blend with the gradient background */
  image-rendering: optimizeQuality;
  padding: 0; /* avoid extra internal spacing */
}
/* Ensure contained image inside the picture scales responsively within the 10px viewport margin. */
.center-overlay img { 
  display: block;
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
}

/* Ensure overlay doesn't overpower small screens */
@media (max-width: 749px) {
  .center-overlay {
  /* Maintain 40px horizontal margin on mobile as well (at least 40px requested). */
  width: calc(100vw - 80px);
  /* Cap growth at width reached at 570px viewport (570 - 80 = 490px). */
  max-width: 490px;
  max-height: calc(100vh - 20px);
    opacity: 0.65;
  }
}

main h1 {
  font-size: 2.88rem; /* 10% reduction */
  line-height: 1.05;
  margin-bottom: 18px;

  /* Disable hyphenation across all headings to ensure clean line breaks. */
  hyphens: none;
}

main p {
  font-size: 1.12rem;
  letter-spacing: 0.04rem;
  color: #c4ffff;

  /* Disable hyphenation on paragraphs for both desktop and mobile. */
  hyphens: none;
}

main .center {
  display: flex;
  justify-content: center;
  align-items: flex-start; /* lift image */
}

main .object-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1000px;
}

/* Scale the wrapper so the contained image appears 1.5x larger everywhere
   (keeps variant image transforms intact because they run on the img itself) */
.object-wrapper {
  /* Reduce the scale of the central glass wrapper on desktop. A lower
     scale factor produces a glass size closer to the provided mock‑up
     rather than the extremely large version previously used. */
  transform: scale(1.2);
  transform-origin: center center;
  /* Apply the floating wrapper animation.  This scales the wrapper
     (preserving the 1.2 factor) and translates it vertically to create a
     gentle bob without displacing adjacent text. */
  animation: floatWrapper 8s ease-in-out infinite;
}

main .object-wrapper img {
  /* Define a moderate base width for the central glass. The wrapper scale
     above further enlarges it, so this value should approximate the
     proportions seen in the mock‑up on a 1920px wide screen. */
  width: 500px;
  max-width: 40vw;
  height: auto;
  /* Disable any global animation on the image itself.  Floating is
     handled by the wrapper so variant‑specific transforms (e.g. scale or
     rotation) defined on the image do not conflict with a second
     transform. */
  animation: none;
  transform-style: preserve-3d;
  transition: transform 1200ms ease-in-out, width 1000ms ease-in-out, filter 1200ms ease-in-out, opacity 1200ms ease-in-out;
}

/* .side-note removed from markup; rule intentionally deleted */

@keyframes rotateObj {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}

/* Footer styling */
footer {
  position: absolute;
  /* give a bit more space from the bottom as requested */
  bottom: 28px;
  width: 100%;
  text-align: center;
  font-size: 0.48rem; /* reduced ~20% for desktop */
  font-family: 'Poppins', sans-serif; /* match the menu font */
  letter-spacing: 3px; /* tracking reduced to 3 */
  text-transform: uppercase; /* show the footer in all caps */
  opacity: 0.6;
  z-index: 5;
}

/* Ensure that on desktop the heading and subheading share the same
   font size and line height. Matching their sizes prevents the
   subheading from appearing dwarfed by the headline and allows both
   elements to wrap consistently into multiple lines without
   hyphenation. */
@media (min-width: 750px) {
  main h1,
  main #subheading {

    /* Reduce the headline and subheadline size by 25% for better
       balance on desktop. Both elements share the same size so the
       interface remains harmonious. */
  font-size: 3.375rem; /* locked size across desktop breakpoints */
    line-height: 1.06;
  }
}

/* Home (no-left-text NOT applied) heading & subheading width control on desktop/large screens.
   Keep font size steady; constrain measure so heading stays on 2 lines (manual <br>) and
   subheading naturally wraps to 2 (max 3) lines without overflowing the frame. */
@media (min-width: 750px) {
  body:not(.no-left-text) .text-block.left #heading {
    max-width: 30ch; /* width tuned so content wraps to 2 lines (manual <br>) without exceeding 3 */
    overflow-wrap: break-word;
    word-break: normal;
  }
  body:not(.no-left-text) #subheading {
    max-width: 34ch; /* ensures <=3 lines; adjust ch to tune wrapping */
    overflow-wrap: break-word;
    word-break: normal;
  }
  /* Prevent any unintended shrinking: disallow responsive font scaling utilities if present */
  body:not(.no-left-text) #heading,
  body:not(.no-left-text) #subheading {
    font-size: 3.375rem !important; /* fixed desktop size */
  }
  /* Allow only horizontal positional adjustment via padding while keeping width constant */
  body:not(.no-left-text) .text-block.left { padding-left: 2vw; }
  body:not(.no-left-text) .text-block.right { padding-left: 2vw; }
}

/* Responsive adjustments for smaller screens */
@media (max-width: 749px) {
  nav {
    /* Stack items for mobile but keep menu aligned right as in the mockup */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  padding: 8px 14px; /* tighten nav padding */
  top: 0; /* ensure nav sits at top */
  position: fixed; /* keep nav above main */
  background: transparent;
  z-index: 40;
  }
  nav .menu {
  flex-direction: column; /* vertical stack */
  gap: 0px; /* no gap between items on mobile */
  align-items: flex-end; /* align items to the right */
  display: flex;
  margin-top: 20px; /* place menu items lower (~20px from top) */
  padding-right: 18px; /* padding on the right */
  }
  nav .menu li {
    padding: 4px 8px; /* reduce padding so items are visually closer */
    font-size: 0.68rem; /* slightly smaller to match earlier 10% reduction */
  }
  nav .logo img {
    height: 92px;
    margin-left: 20px; /* ensure at least 20px left margin on mobile */
    margin-top: -18px;
    transform: none;
  }

  /* Ensure main stacks: top text (original left) -> object -> bottom text (original right)
     and is positioned below the fixed nav */
  /* Make header fixed and ensure main reserves space above and below so content
     never scrolls under the header or footer on mobile. */
  header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 120; /* above other elements */
    min-height: var(--mobile-nav-offset);
    align-items: center;
  }

  main {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    min-height: calc(100vh - var(--mobile-nav-offset));
    /* keep left padding generous as requested */
    padding: 18px 40px 18px 40px;
    margin-top: var(--mobile-nav-offset); /* push main below the fixed header */
    padding-bottom: calc(var(--footer-height) + 18px); /* reserve space for footer */
  }
  main .object-wrapper {
    margin-top: 28px;
    /* allow the wrapper to size to content on mobile */
    height: auto;
  /* keep the global scale on mobile consistent and enlarged by 1.4x */
  transform: scale(2.1315);
    transform-origin: center center;
    display: flex;
    justify-content: center;
  }

  main .object-wrapper img {
    /* Make the central image prominently large on mobile but keep it contained */
    max-width: 40vh;
    width: auto;
    height: auto;
  }
  /* Make top and bottom text the same size on mobile and ensure wrapping/ hyphenation */
  /* Use responsive font sizing so text scales with viewport */
  /* Larger mobile typography (closer to original desktop scale) */
  main h1, main #subheading {
    font-size: clamp(1.8rem, 9.5vw, 3rem);
    font-weight: 400; /* normal weight */
    letter-spacing: 0px; /* no extra tracking */
    max-width: 100%;
    /* Disable hyphenation completely across all engines */
    hyphens: none;
    -webkit-hyphens: none;
    -ms-hyphens: none;
    word-wrap: break-word;
    line-height: 1.06;
    margin: 6px 0;
  }
  main p {
    font-size: clamp(1.1rem, 4.5vw, 1.6rem);
    line-height: 1.06;
    margin: 6px 0;
  }
  main h1 {
    text-align: right; /* top text aligned right */
  }
  main #subheading {
    text-align: left; /* bottom text aligned left */
    margin-bottom: 12px;
  }
  /* Ensure heading and subheading stay within viewport and appear above/below the object */
  .text-block.left, .text-block.right {
    max-width: 100%;
  }
  .text-block.left {
    order: 0;
    width: 100%; /* occupy 70% of the available width */
    max-width: 100%;
    padding: 0;
    margin: 0; /* remove top margin per request */
    text-align: right; /* ensure left-column text aligns right on mobile */
    margin-left: auto; /* push block to the right so text aligns visually */
  }
  .center {
    order: 1;
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 6% 0;
  }
  .text-block.right {
    order: 2;
    width: 100%; /* occupy 70% of the available width */
    max-width: 100%;
    padding: 0;
    margin: 0; 
    text-align: left; /* ensure right-column text aligns left on mobile (bottom) */
    margin-right: auto; /* push block to the left so text aligns visually */
  }

  /* When the page is scrolled on mobile we hide the header and dim the center overlay.
     This class is toggled on the <body> by JS to avoid layout reflow. */
  body.hide-header header {
    transform: translateY(-120%);
    opacity: 0;
    pointer-events: none;
  }
  body.hide-header .center-overlay {
    opacity: 0.28;
  }

  /* Place footer in normal document flow on mobile so it always appears at the end
     and never overlaps the content. */
  footer {
    position: static;
    bottom: auto;
    width: 100%;
    padding: 18px 12px;
    box-sizing: border-box;
  }
}

/* On large desktop screens (>1200px) also increase the minimum height so there is
   enough vertical space to scroll and trigger the header fade behaviour. */
@media (min-width: 1201px) {
  main {
    min-height: calc(130vh - var(--desktop-nav-offset));
  }
}

/* Staggered fade-in helpers for content transitions */
/* Apply an initial blur and fade on key content elements so they gently
   sharpen and brighten when revealed. The transition on the filter
   property is included alongside opacity and transform. */
.object-wrapper, #heading, #subheading {
  opacity: 0;
  /* Start lower for a more noticeable slide up when content appears */
  transform: translateY(24px);
  /* Slight blur and reduced brightness at start for an extra fade effect */
  filter: blur(6px) brightness(0.8);
  /* slower, more visible ease-in/out fade for content transitions triggered by JS */
  transition: opacity 900ms ease-in-out var(--delay, 0ms),
              transform 900ms ease-in-out var(--delay, 0ms),
              filter 900ms ease-in-out var(--delay, 0ms);
}
/* When visible, reset blur and brightness so elements appear crisp */
.visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
  filter: none !important;
}

/* Variant filters for the central object when menu items change */
.object-wrapper img.variant-home { 
  /* For the home section, enlarge the central glass noticeably. The image
     itself scales up, compounding with the wrapper scale for a dramatic
     effect. We keep the filter at its default so colours remain intact. */
  filter: none;
  /* Enlarge the home image to 1.6× its original size.  A larger
     multiplier would cause layout issues when returning from other
     sections; 1.6 matches the intended design while leaving room for
     the floating animation. */
  transform: scale(1.6);
  transition: filter 1200ms ease-in-out, transform 1200ms ease-in-out, opacity 1200ms ease-in-out;
}
@media (min-width: 750px) {
  .object-wrapper img.variant-home {
    margin-top: -300px; /* lift home variant upward */
  }
}
.object-wrapper img.variant-dress {
  /* Do not change the hue on the dress code image because it depicts real
     people. Increase saturation and maintain brightness while slightly
     enlarging the image. */
  filter: saturate(1.2) brightness(.96);
  transform: scale(1.2);
}
.object-wrapper img.variant-contact {
  filter: sepia(.18) saturate(1.2) hue-rotate(10deg);
  transform: scale(0.98);
}
.object-wrapper img.variant-date {
  filter: contrast(1.05) saturate(1.1) brightness(1.04);
  transform: rotate(-6deg);
  /* Desktop specific sizing for date variant */
}
@media (min-width: 750px) {
  .object-wrapper img.variant-date {
    width: 300px !important; /* requested fixed desktop width */
    max-width: 300px !important;
    height: auto;
  }
}
.object-wrapper img.variant-rsvp {
  filter: grayscale(.3) invert(.04) hue-rotate(-30deg);
  transform: scale(1.03);
}

/* Guest star variant: rotate the image slightly and scale it up a bit to
   emphasise our special performer.  No colour filters are applied so
   Blanche Bailly’s portrait remains natural. */
.object-wrapper img.variant-guest {
  transform: rotate(-6deg) scale(1.2);
}

/* Raise all non-home variant images higher within the main layout without
   affecting the enlarged home image. Negative top margin preserves existing
   scale/rotation transforms on each variant (avoids overriding transform). */
@media (min-width: 750px) {
  .object-wrapper img:not(.variant-home) {
    margin-top: -500px; /* desktop upward shift */
  }
}
@media (max-width: 749px) {
  .object-wrapper img:not(.variant-home) {
    margin-top: -40px; /* gentler shift on mobile */
  }
}

/* Style links inside subheadings. Both email and phone links and the map code
   should stand out in the brand’s cyan colour and appear underlined to hint
   interactivity. We avoid changing the default font size so they blend
   seamlessly with the surrounding copy. */
a.map-link,
a.link {
  color: #00FFFE;
  text-decoration: underline;
}

/* Position images higher in their column on desktop when the left text is
   hidden (i.e. on sections other than home). Without this override, the
   image vertically centres itself within the available space, which feels
   awkward when paired with the right‑side text. */
@media (min-width: 750px) {
  body.no-left-text main .center {
    align-items: flex-start;
  }
}