/* ==========================================================================
   Bedsheet Queue - under construction placeholder
   ========================================================================== */

:root {
  --bg:          #0B1220;
  --bg-deep:     #070C16;
  --surface:     #131E31;
  --line:        #26354E;
  --ink:         #F3ECE0;
  --ink-2:       #C3CDDD;
  --ink-3:       #8E9BB0;
  --gold:        #F7B733;
  --gold-bright: #FFD166;
  --cream:       #EFE7D8;
  --blue:        #1E5AA8;
  --teal:        #3AA69B;
  --coral:       #E2705A;
  --font-sans:  "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-round: "SF Pro Rounded", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

html { background: #0B1220; -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

/* Ambient background ------------------------------------------------------- */
.glow {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(10px);
}
.glow--gold {
  top: -22vh; left: 50%;
  width: 90vmin; height: 90vmin;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(247, 183, 51, .17), transparent 70%);
  animation: pulse 11s ease-in-out infinite;
}
.glow--blue {
  bottom: -28vh; left: -10vw;
  width: 80vmin; height: 80vmin;
  background: radial-gradient(closest-side, rgba(30, 90, 168, .26), transparent 70%);
  animation: pulse 14s ease-in-out infinite reverse;
}
.glow--teal {
  bottom: -20vh; right: -12vw;
  width: 62vmin; height: 62vmin;
  background: radial-gradient(closest-side, rgba(58, 166, 155, .17), transparent 70%);
  animation: pulse 17s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: .75; transform: translateX(var(--tx, 0)) scale(1); }
  50%      { opacity: 1;   transform: translateX(var(--tx, 0)) scale(1.12); }
}
.glow--gold { --tx: -50%; }

/* Floating props ----------------------------------------------------------
   A scattered field of 28 bedding objects behind the panel, arranged in four
   depth bands. Size and opacity both fall as objects move inward and toward
   the horizon, so the background reads as depth rather than as a row of
   images bobbing in place. Sizes run from 190px down to 30px.

   Every prop drifts on one of five paths with its own duration, and no two
   share a duration, so nothing moves in step with anything else. */
.prop {
  position: fixed;
  z-index: 0;
  pointer-events: none;
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, .55));
  will-change: transform;
}

/* Band 1 - foreground, largest and most visible */
.prop--tower    { left: -2vw;   bottom: 2vh;  width: clamp(112px, 14vw,  190px); opacity: .13; animation: drift-a 15s ease-in-out infinite; }
.prop--duvet    { right: -1vw;  top: 8vh;     width: clamp(102px, 13vw,  174px); opacity: .12; animation: drift-b 18s ease-in-out infinite; }
.prop--locker   { left: 1vw;    top: 44vh;    width: clamp(88px,  10.5vw, 150px); opacity: .11; animation: drift-d 26s ease-in-out infinite; }
.prop--carousel { right: 1vw;   bottom: 38vh; width: clamp(84px,  10vw,  142px); opacity: .11; animation: drift-e 31s ease-in-out infinite reverse; }

/* Band 2 */
.prop--wardrobe { left: 4vw;    top: 7vh;     width: clamp(72px,  8.5vw, 120px); opacity: .10; animation: drift-c 21s ease-in-out infinite; }
.prop--trophy   { right: 4vw;   bottom: 5vh;  width: clamp(76px,  9vw,   128px); opacity: .10; animation: drift-a 19s ease-in-out infinite reverse; }
.prop--vending  { right: 8vw;   top: 46vh;    width: clamp(66px,  8vw,   112px); opacity: .09; animation: drift-d 33s ease-in-out infinite; }
.prop--elevator { left: 9vw;    bottom: 4vh;  width: clamp(60px,  7.2vw, 102px); opacity: .09; animation: drift-b 28s ease-in-out infinite reverse; }
.prop--basket   { left: 6vw;    top: 24vh;    width: clamp(62px,  7.4vw, 104px); opacity: .09; animation: drift-e 16s ease-in-out infinite; }
.prop--hamper   { right: 6vw;   bottom: 16vh; width: clamp(58px,  7vw,    98px); opacity: .09; animation: drift-c 34s ease-in-out infinite; }

/* Band 3 */
.prop--gauge    { right: 11vw;  bottom: 30vh; width: clamp(54px,  6.4vw,  92px); opacity: .08; animation: drift-b 23s ease-in-out infinite; }
.prop--wheel    { left: 11vw;   bottom: 33vh; width: clamp(54px,  6.6vw,  94px); opacity: .08; animation: drift-c 17s ease-in-out infinite reverse; }
.prop--counter  { left: 15vw;   top: 32vh;    width: clamp(48px,  5.8vw,  82px); opacity: .07; animation: drift-a 25s ease-in-out infinite; }
.prop--dial     { right: 15vw;  top: 24vh;    width: clamp(46px,  5.6vw,  78px); opacity: .07; animation: drift-b 20s ease-in-out infinite reverse; }
.prop--bin      { right: 19vw;  bottom: 44vh; width: clamp(42px,  5vw,    70px); opacity: .07; animation: drift-d 36s ease-in-out infinite reverse; }
.prop--scale    { left: 18vw;   bottom: 48vh; width: clamp(44px,  5.2vw,  74px); opacity: .07; animation: drift-e 22s ease-in-out infinite; }

/* Band 4 - inner, faintest, closest to the panel */
.prop--pillow   { left: 21vw;   bottom: 7vh;  width: clamp(44px,  5.2vw,  74px); opacity: .06; animation: drift-c 27s ease-in-out infinite; }
.prop--fitted   { right: 22vw;  top: 5vh;     width: clamp(44px,  5.2vw,  74px); opacity: .06; animation: drift-a 22.5s ease-in-out infinite reverse; }
.prop--bell     { left: 25vw;   top: 22vh;    width: clamp(36px,  4.2vw,  60px); opacity: .055; animation: drift-d 38s ease-in-out infinite; }
.prop--burrito  { right: 26vw;  bottom: 22vh; width: clamp(38px,  4.4vw,  64px); opacity: .055; animation: drift-e 19.5s ease-in-out infinite reverse; }
.prop--queue    { left: 29vw;   top: 3vh;     width: clamp(32px,  3.8vw,  56px); opacity: .05; animation: drift-b 29s ease-in-out infinite; }
.prop--cart     { right: 30vw;  bottom: 3vh;  width: clamp(32px,  3.8vw,  56px); opacity: .05; animation: drift-c 24s ease-in-out infinite reverse; }
.prop--brick    { left: 38vw;   top: 2vh;     width: clamp(30px,  3.4vw,  50px); opacity: .045; animation: drift-a 32s ease-in-out infinite; }
.prop--folded   { right: 39vw;  bottom: 2vh;  width: clamp(30px,  3.4vw,  50px); opacity: .045; animation: drift-e 35s ease-in-out infinite; }

/* Band 5 - horizon, barely there */
.prop--sheetball { left: 34vw;  bottom: 40vh; width: clamp(26px,  3vw,    44px); opacity: .035; animation: drift-d 41s ease-in-out infinite reverse; }
.prop--qrtag     { right: 35vw; top: 38vh;    width: clamp(24px,  2.8vw,  40px); opacity: .035; animation: drift-b 30.5s ease-in-out infinite; }
.prop--clip      { left: 44vw;  bottom: 30vh; width: clamp(22px,  2.5vw,  36px); opacity: .03; animation: drift-c 37s ease-in-out infinite; }
.prop--nfcclip   { right: 45vw; top: 30vh;    width: clamp(22px,  2.5vw,  36px); opacity: .03; animation: drift-e 26.5s ease-in-out infinite reverse; }

/* Five drift paths with different arcs, travel distances and rotations. */
@keyframes drift-a {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-2.5deg); }
  50%      { transform: translate3d(6px, -22px, 0) rotate(2.5deg); }
}
@keyframes drift-b {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(2deg); }
  50%      { transform: translate3d(-9px, -15px, 0) rotate(-3deg); }
}
@keyframes drift-c {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  33%      { transform: translate3d(7px, -12px, 0) rotate(3deg); }
  66%      { transform: translate3d(-5px, -20px, 0) rotate(-2deg); }
}
@keyframes drift-d {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(1.5deg); }
  40%      { transform: translate3d(-6px, -9px, 0) rotate(-2deg); }
  75%      { transform: translate3d(4px, -17px, 0) rotate(3.5deg); }
}
@keyframes drift-e {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-1.5deg); }
  50%      { transform: translate3d(10px, -8px, 0) rotate(2deg); }
}

/* Layout ------------------------------------------------------------------- */
.wrap {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8vh 24px 4vh;
}

.panel {
  width: 100%;
  max-width: 820px;
  text-align: center;
}

/* Title lockup ------------------------------------------------------------- */
.lockup {
  width: min(660px, 100%);
  margin: 0 auto 8px;
  filter: drop-shadow(0 26px 54px rgba(0, 0, 0, .62));
  animation: lockup-in 1.1s cubic-bezier(.2, .85, .28, 1) both,
             hover 7.5s ease-in-out 1.1s infinite;
}
@keyframes lockup-in {
  from { opacity: 0; transform: translateY(34px) scale(.93); }
  to   { opacity: 1; transform: none; }
}
@keyframes hover {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

.kicker {
  display: inline-block;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(247, 183, 51, .34);
  background: rgba(247, 183, 51, .07);
  border-radius: 999px;
  padding: 8px 18px;
  margin-bottom: 26px;
  animation: fade-up .8s ease .5s both;
}

.headline {
  font-family: var(--font-round);
  font-size: clamp(1.6rem, 4.6vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.18;
  margin: 0 0 16px;
  animation: fade-up .8s ease .65s both;
}
.headline em { font-style: normal; color: var(--gold); }

.blurb {
  font-size: clamp(1rem, 1.9vw, 1.13rem);
  color: var(--ink-2);
  max-width: 54ch;
  margin: 0 auto 40px;
  animation: fade-up .8s ease .8s both;
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* The queue meter ---------------------------------------------------------- */
.meter {
  max-width: 560px;
  margin: 0 auto;
  animation: fade-up .8s ease .95s both;
}

.meter__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.meter__value {
  font-family: var(--font-round);
  font-size: 1rem;
  letter-spacing: .04em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

/* Five shelf slots that fill with folded linen, one after another */
.meter__shelf {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(19, 30, 49, .9), rgba(10, 16, 28, .9));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 18px 44px rgba(0, 0, 0, .42);
}

.slot {
  position: relative;
  height: 58px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .035);
  border: 1px dashed rgba(255, 255, 255, .1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 3px;
  padding: 6px;
}

/* Each folded piece inside a slot.
   Four pieces per set: a folded fitted sheet (thickest), a flat sheet, and two
   pillowcases. Heights differ so a stack reads as distinct pieces rather than
   four identical bars. Colours are assigned per slot below, so every slot in
   the shelf holds a visibly different sheet set. */
.slot i {
  display: block;
  height: 0;
  border-radius: 3px;
  transform-origin: bottom center;
  transition: height .5s cubic-bezier(.3, .9, .3, 1), opacity .4s ease;
  opacity: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
}

.slot.is-filling i:nth-child(1),
.slot.is-filled  i:nth-child(1) { height: 11px; opacity: 1; }
.slot.is-filling i:nth-child(2),
.slot.is-filled  i:nth-child(2) { height: 9px;  opacity: 1; }
.slot.is-filling i:nth-child(3),
.slot.is-filled  i:nth-child(3) { height: 6px;  opacity: 1; }
.slot.is-filling i:nth-child(4),
.slot.is-filled  i:nth-child(4) { height: 6px;  opacity: 1; }

/* Each piece settles a beat after the one below it, so the stack builds up. */
.slot i:nth-child(1) { transition-delay: 0s; }
.slot i:nth-child(2) { transition-delay: .12s; }
.slot i:nth-child(3) { transition-delay: .24s; }
.slot i:nth-child(4) { transition-delay: .36s; }

/* Slot 1 - Harbour Stripe: navy and cream, with a ticking stripe on the flat sheet */
.slot[data-slot="1"] i:nth-child(1) { background: linear-gradient(180deg, #2F6FC4, #1E4E92); }
.slot[data-slot="1"] i:nth-child(2) {
  background: repeating-linear-gradient(90deg, #EFE7D8 0 7px, #2F6FC4 7px 10px);
}
.slot[data-slot="1"] i:nth-child(3) { background: linear-gradient(180deg, #F4EDE1, #D9CFBC); }
.slot[data-slot="1"] i:nth-child(4) { background: linear-gradient(180deg, #3D82DC, #2A5FA8); }

/* Slot 2 - Sunrise Cotton: mustard and gold with a bone pillowcase */
.slot[data-slot="2"] i:nth-child(1) { background: linear-gradient(180deg, #F7B733, #D08D12); }
.slot[data-slot="2"] i:nth-child(2) { background: linear-gradient(180deg, #FFD166, #E3A62C); }
.slot[data-slot="2"] i:nth-child(3) { background: linear-gradient(180deg, #F4EDE1, #DDD0B6); }
.slot[data-slot="2"] i:nth-child(4) { background: linear-gradient(180deg, #E0A94C, #B8801E); }

/* Slot 3 - Sage Linen: muted greens and bone */
.slot[data-slot="3"] i:nth-child(1) { background: linear-gradient(180deg, #8DA383, #64795B); }
.slot[data-slot="3"] i:nth-child(2) { background: linear-gradient(180deg, #A9BC9E, #7E9273); }
.slot[data-slot="3"] i:nth-child(3) { background: linear-gradient(180deg, #E8DFCD, #C8BCA3); }
.slot[data-slot="3"] i:nth-child(4) { background: linear-gradient(180deg, #7E9273, #5A6C51); }

/* Slot 4 - Clay Percale: terracotta and coral with a checked pillowcase */
.slot[data-slot="4"] i:nth-child(1) { background: linear-gradient(180deg, #C4704F, #965034); }
.slot[data-slot="4"] i:nth-child(2) { background: linear-gradient(180deg, #E2705A, #B4503B); }
.slot[data-slot="4"] i:nth-child(3) {
  background: repeating-linear-gradient(90deg, #EFE7D8 0 5px, #E2705A 5px 8px);
}
.slot[data-slot="4"] i:nth-child(4) { background: linear-gradient(180deg, #D98F6F, #A9664A); }

/* Slot 5 - Eucalyptus Sateen: teals with a cream hem */
.slot[data-slot="5"] i:nth-child(1) { background: linear-gradient(180deg, #3AA69B, #26796F); }
.slot[data-slot="5"] i:nth-child(2) { background: linear-gradient(180deg, #5EC3B8, #379A8F); }
.slot[data-slot="5"] i:nth-child(3) { background: linear-gradient(180deg, #7FA79B, #5A8276); }
.slot[data-slot="5"] i:nth-child(4) { background: linear-gradient(180deg, #EFE7D8, #CBC0AA); }

.slot.is-filled {
  border-style: solid;
  border-color: rgba(247, 183, 51, .4);
  background: rgba(247, 183, 51, .06);
}

/* Clearing a slot: the top pieces lift away first, so the stack unstacks
   in the reverse order it was built. */
.slot.is-clearing i:nth-child(1) { transition-delay: .36s; }
.slot.is-clearing i:nth-child(2) { transition-delay: .24s; }
.slot.is-clearing i:nth-child(3) { transition-delay: .12s; }
.slot.is-clearing i:nth-child(4) { transition-delay: 0s; }

/* Shimmer sweep across the slot currently being filled */
.slot.is-filling::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, .22) 50%, transparent 80%);
  transform: translateX(-120%);
  animation: sweep 1.25s ease-in-out infinite;
}
@keyframes sweep {
  to { transform: translateX(120%); }
}

/* Slot number plaque */
.slot::before {
  content: attr(data-slot);
  position: absolute;
  top: 5px; left: 7px;
  font-family: var(--font-round);
  font-size: .68rem;
  font-weight: 800;
  color: rgba(255, 255, 255, .28);
  z-index: 2;
}
.slot.is-filled::before { color: rgba(247, 183, 51, .75); }

.meter__status {
  margin-top: 16px;
  font-size: .92rem;
  color: var(--ink-3);
  min-height: 1.5em;
}
.meter__status strong {
  color: var(--ink);
  font-weight: 600;
}

/* Sign off ----------------------------------------------------------------- */
.signoff {
  margin-top: 44px;
  font-size: .95rem;
  color: var(--ink-3);
  animation: fade-up .8s ease 1.15s both;
}
.signoff strong { color: var(--cream); font-weight: 600; }

/* Footer ------------------------------------------------------------------- */
.foot {
  position: relative;
  z-index: 1;
  padding: 26px 24px 30px;
  text-align: center;
  font-size: .86rem;
  color: var(--ink-3);
  border-top: 1px solid rgba(255, 255, 255, .06);
}
.foot a {
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .16s ease;
}
.foot a:hover, .foot a:focus-visible { color: var(--gold); }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

/* Responsive --------------------------------------------------------------- */
/* Thin the field out as the viewport narrows, from the horizon inward, so the
   composition stays balanced instead of collapsing all at once. */
@media (max-width: 1280px) {
  .prop--clip, .prop--nfcclip, .prop--sheetball, .prop--qrtag { display: none; }
}

@media (max-width: 1100px) {
  .prop--brick, .prop--folded, .prop--queue, .prop--cart { display: none; }
}

@media (max-width: 960px) {
  .prop--bell, .prop--burrito, .prop--bin, .prop--scale { display: none; }
}

@media (max-width: 860px) {
  .prop--pillow, .prop--fitted, .prop--counter, .prop--dial,
  .prop--basket, .prop--hamper { display: none; }
}

@media (max-width: 620px) {
  .wrap { padding-top: 6vh; }
  .prop--wardrobe, .prop--trophy, .prop--gauge, .prop--wheel,
  .prop--vending, .prop--elevator { display: none; }
  .prop--tower    { width: 92px; opacity: .09; left: -16px; bottom: 2vh; }
  .prop--duvet    { width: 86px; opacity: .08; right: -14px; top: 6vh; }
  .prop--locker   { width: 62px; opacity: .06; left: -8px; top: 46vh; }
  .prop--carousel { width: 58px; opacity: .06; right: -6px; bottom: 34vh; }
  .meter__shelf { gap: 7px; padding: 9px; }
  .slot { height: 56px; padding: 5px; }
  .kicker { letter-spacing: .16em; font-size: .68rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .lockup, .kicker, .headline, .blurb, .meter, .signoff { opacity: 1; transform: none; }
  .slot.is-filling::after { display: none; }
}