/* ============================================================
index — page styles
Loaded after site.css, so anything here wins for this page
only. Shared chrome (header, nav, footer, grids, cards) was
handed back to site.css; what is left is the homepage hero.
============================================================ */
/* ============ HERO ============ */
.hero{
position:relative;
text-align:center;
padding:80px 24px 100px;
overflow:hidden;
background:
radial-gradient(ellipse 60% 55% at 50% 38%, rgba(108,63,166,0.35), transparent 70%),
var(--void);
}
.dust{
position:absolute;
inset:0;
pointer-events:none;
}
.dust i{
position:absolute;
width:3px; height:3px;
background:var(--lilac);
border-radius:50%;
opacity:0;
animation:twinkle 4s ease-in-out infinite;
box-shadow:0 0 6px 1px rgba(201,168,232,0.8);
}
@keyframes twinkle{
0%, 100%{opacity:0; transform:scale(0.6);}
50%{opacity:0.9; transform:scale(1.2);}
}
@media (prefers-reduced-motion: reduce){ .dust i{animation:none; opacity:0.35;} }

.hero-logo{
position:relative;
width:min(300px, 62vw);
margin:0 auto 8px;
filter:drop-shadow(0 0 34px rgba(108,63,166,0.55));
animation:rise 0.9s cubic-bezier(.2,1,.3,1) both;
}
@keyframes rise{
0%{opacity:0; transform:translateY(16px) scale(0.97);}
100%{opacity:1; transform:translateY(0) scale(1);}
}
@media (prefers-reduced-motion: reduce){ .hero-logo{animation:none;} }
.hero-logo img{width:100%; display:block;}

.hero-eyebrow{
position:relative;
font-family:'Cinzel', serif;
font-size:12px;
letter-spacing:0.35em;
color:var(--lilac);
margin-bottom:18px;
}
.hero h1{
position:relative;
font-family:'Pirata One', serif;
font-weight:400;
font-size:clamp(46px, 8vw, 96px);
line-height:1;
text-transform:uppercase;
/* colour + glow come from the chrome-lettering rule in site.css */
}
.hero-sub{
position:relative;
max-width:460px;
margin:26px auto 0;
font-size:15px;
line-height:1.75;
color:rgba(231,228,236,0.7);
}
.hero-cta{
position:relative;
display:inline-block;
margin-top:38px;
font-family:'Cinzel', serif;
font-size:12px;
letter-spacing:0.2em;
color:var(--void);
background:var(--royal-run);
padding:16px 34px;
text-decoration:none;
border:1px solid var(--royal);
}


@media (max-width:600px){
.hero{padding:56px 18px 70px;}
}


/* ============================================================
   HERO — UPLIFT
   The crest was already the strongest thing on the page and the
   layout was treating it like a logo in a corner. It gets room,
   a bloom behind it, and a slow drift so the page has a pulse
   before anyone scrolls.
   ============================================================ */
.hero{
  padding:64px 24px 96px;
  background:
    radial-gradient(ellipse 55% 45% at 50% 32%, rgba(108,63,166,0.42), transparent 68%),
    radial-gradient(ellipse 120% 60% at 50% 100%, rgba(108,63,166,0.10), transparent 70%),
    var(--void);
}
/* a hairline that fades out at both ends, so the hero has a floor
   without a hard rule across the page */
.hero::after{
  content:'';
  position:absolute;
  left:12%; right:12%; bottom:0;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--edge-loud), transparent);
}
.hero-logo{
  width:min(340px, 66vw);
  filter:drop-shadow(0 0 46px rgba(108,63,166,0.6));
}
.hero-logo img{animation:qcc-drift 7s ease-in-out infinite;}
@keyframes qcc-drift{
  0%, 100%{transform:translateY(0);}
  50%{transform:translateY(-9px);}
}
.hero-eyebrow{
  font-size:11px;
  letter-spacing:0.42em;
  color:var(--lilac);
  opacity:0.9;
}
.hero h1{
  font-size:clamp(42px, 8vw, 104px);
  letter-spacing:0.01em;
}
.hero-sub{color:var(--text-dim);}
.hero-cta{
  margin-top:34px;
  letter-spacing:0.22em;
  padding:17px 40px;
  border-color:transparent;
}

/* A second way out of the hero. One button meant a visitor who did
   not want to browse the whole catalogue had nowhere to go but the
   nav, and the two things people actually arrive for — a custom
   piece, and the lines already running — were four scrolls down. */
.hero-actions{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  justify-content:center;
  align-items:center;
}
.hero-ghost{
  display:inline-block;
  margin-top:34px;
  font-family:'Cinzel', serif;
  font-size:12px;
  letter-spacing:0.22em;
  color:var(--lilac);
  background:transparent;
  border:1px solid var(--edge);
  border-radius:2px;
  padding:16px 32px;
  text-decoration:none;
  transition:border-color 0.25s var(--ease), color 0.25s var(--ease), background 0.25s var(--ease);
}
.hero-ghost:hover, .hero-ghost:focus-visible{
  border-color:var(--royal);
  background:rgba(108,63,166,0.16);
  color:var(--chrome);
}

/* The three things worth knowing before scrolling: what it costs to
   ship, that nothing is sitting in a warehouse, and that a design
   never retires. They were buried in the footer and the announce bar. */
.hero-marks{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px 34px;
  margin-top:46px;
  font-family:'Cinzel', serif;
  font-size:10px;
  letter-spacing:0.16em;
  color:var(--text-faint);
}
.hero-marks span{display:inline-flex; align-items:center; gap:9px;}
.hero-marks span::before{
  content:'';
  width:5px; height:5px;
  background:var(--lilac);
  transform:rotate(45deg);
  box-shadow:0 0 8px rgba(201,168,232,0.9);
}

@media (max-width:600px){
  .hero{padding:44px 18px 66px;}
  .hero-marks{gap:10px 20px; margin-top:34px; font-size:9px;}
  .hero-ghost, .hero-cta{padding:14px 24px; font-size:11px;}
}
@media (prefers-reduced-motion: reduce){
  .hero-logo img{animation:none;}
}

/* ============================================================
   HERO — Amanda's glitter
   Her own sheet, laid over the top of the hero where it is
   densest and gone by the time it reaches the headline. Screen
   blend so the specks add light instead of sitting on the page
   as a grey rectangle, and a mask so it fades out rather than
   ending on a line.

   It is decoration, so: no pointer events, and it comes second
   to the crest — 0.5 opacity, not 1. At full strength it fights
   the logo, which is the one thing on this page that has to win.
   ============================================================ */
.hero::before{
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:62%;
  pointer-events:none;
  /* Tiled at its native width, not stretched to cover. "cover" on a
     1440px page scaled a 720px sheet to double size and every speck
     doubled with it — glitter turned into grey confetti. Repeating
     keeps the grain the size it was drawn at, at any window width, and
     the sheet's own randomness hides the seams. */
  background:url('/assets/images/sparkle-silver.webp') top center / 720px auto repeat-x;
  mix-blend-mode:screen;
  opacity:0.5;
  -webkit-mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,0.65) 45%, transparent 100%);
          mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,0.65) 45%, transparent 100%);
}
@media (max-width:600px){
  .hero::before{height:52%; opacity:0.42;}
}