/* lux.css — the shine.
 *
 * Restraint is the point. The brief bans animation that distracts or fakes 3D,
 * and on a jewellery site the photography is supposed to be the thing that
 * moves you, not the interface. So: slow, low-contrast, mostly light.
 *
 * Everything here is additive. Remove this file and the site still works.
 * Everything also stops dead under prefers-reduced-motion, at the bottom.
 */

/* ------------------------------------------------------------ film grain --
 * A fixed, very faint noise layer over the whole page. It does two jobs: it
 * reads as photographic rather than flat digital, and it hides the softness in
 * low-resolution source imagery, which matters while the real photos are
 * outstanding. Generated inline so it costs no request.
 */
body::after{
  content:""; position:fixed; inset:0; z-index:200; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* ------------------------------------------------------------ gold sheen --
 * A slow specular sweep across gold text. Clipped to the glyphs, so it reads as
 * light moving over metal rather than a highlight passing over a box.
 */
.hero h1 span{
  background:linear-gradient(100deg,
    var(--gold) 0%, var(--gold) 36%,
    #FFF4D8 46%, #FFFDF5 50%, #FFF4D8 54%,
    var(--gold) 64%, var(--gold) 100%);
  background-size:260% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:sheen 7s ease-in-out infinite;
}

@keyframes sheen{
  0%,22%   {background-position:140% 0}
  55%,100% {background-position:-40% 0}
}

/* ------------------------------------------------------ hero drift + haze --
 * A very slow scale on the hero photograph. 14 seconds and 4%, so it is felt
 * rather than seen. The blurred vignette softens the crop edges.
 */
.hero-img img{animation:drift 22s ease-in-out infinite alternate; transform-origin:70% 45%}
@keyframes drift{from{transform:scale(1)} to{transform:scale(1.055)}}

.hero::before{
  content:""; position:absolute; z-index:1; inset:-10%;
  background:radial-gradient(60% 55% at 72% 42%, rgba(203,168,106,.14), transparent 68%);
  filter:blur(44px); pointer-events:none;
}

/* ------------------------------------------------------- scroll reveal ---
 * Sections lift in once. Handled by site.js adding .in; if the script never
 * runs, .reveal elements are visible by default further down, so nothing can
 * end up permanently invisible.
 */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .5s cubic-bezier(.2,.7,.3,1), transform .5s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1; transform:none}
.reveal-d1{transition-delay:.05s} .reveal-d2{transition-delay:.1s} .reveal-d3{transition-delay:.15s}

/* ------------------------------------------------------- card behaviour --
 * A small lift and a warming border. The image already scales inside the frame
 * from site.css, so this only adds the surround.
 */
.card,.cat,.shape{transition:transform .4s cubic-bezier(.2,.7,.3,1), border-color .3s, box-shadow .4s}
.card:hover,.shape:hover{
  transform:translateY(-4px); border-color:var(--gold-dark);
  box-shadow:0 18px 44px rgba(0,0,0,.5), 0 0 0 1px rgba(203,168,106,.12);
}
.cat:hover{box-shadow:0 18px 44px rgba(0,0,0,.55)}

/* a slow glint travelling over each category tile on hover */
.cat::before{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none; opacity:0;
  background:linear-gradient(104deg,transparent 38%,rgba(255,250,235,.16) 48%,rgba(255,255,255,.3) 50%,rgba(255,250,235,.16) 52%,transparent 62%);
  background-size:280% 100%; background-position:130% 0;
  transition:opacity .3s;
}
.cat:hover::before{opacity:1; animation:glint 1.15s ease-out}
@keyframes glint{from{background-position:130% 0} to{background-position:-40% 0}}

/* ------------------------------------------------------------- buttons ---- */
.btn-gold{position:relative; overflow:hidden}
.btn-gold::after{
  content:""; position:absolute; top:0; bottom:0; width:42%; left:-55%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg); pointer-events:none;
}
.btn-gold:hover::after{animation:wipe .62s ease-out}
@keyframes wipe{to{left:125%}}

.btn-line{position:relative}
.btn-line::before{
  content:""; position:absolute; inset:0; border:1px solid var(--gold);
  opacity:0; transform:scale(1.04); transition:opacity .3s, transform .3s; pointer-events:none;
}
.btn-line:hover::before{opacity:.5; transform:scale(1)}

/* ------------------------------------------------------------- surfaces -- */
/* a hairline of gold light along the top edge of the dark panels */
.show,.custom{position:relative}
.show::before,.custom::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(203,168,106,.5) 28%,rgba(203,168,106,.5) 72%,transparent);
}

/* photographs inside panels warm very slightly on hover */
.show-img img{transition:transform 1.1s cubic-bezier(.2,.7,.3,1), filter .6s}
.show-img:hover img{transform:scale(1.035); filter:saturate(1.06) brightness(1.04)}

/* the drawer arrives with a soft shadow rather than a hard edge */
.drawer{box-shadow:-30px 0 70px rgba(0,0,0,.6)}
.scrim{backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px)}

/* section headings get a short gold rule that draws in with the reveal */
.sec-head h2{position:relative; padding-bottom:14px}
.sec-head h2::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:linear-gradient(90deg,var(--gold),transparent);
  transition:width .9s cubic-bezier(.2,.7,.3,1) .2s;
}
.reveal.in .sec-head h2::after,.sec-head.in h2::after{width:72px}

/* ------------------------------------------------------------ reduced ---- */
@media (prefers-reduced-motion:reduce){
  .hero h1 span{animation:none; background:none; -webkit-text-fill-color:var(--gold); color:var(--gold)}
  .hero-img img{animation:none}
  .reveal{opacity:1 !important; transform:none !important; transition:none}
  .sec-head h2::after{width:72px; transition:none}
  .cat:hover::before,.btn-gold:hover::after{animation:none}
  .card:hover,.shape:hover,.show-img:hover img{transform:none}
  body::after{display:none}
}

/* ==========================================================================
   DEPTH PASS
   Dark interfaces go flat because everything is the same black. The fix is not
   more colour, it is edges: a lit top edge, a shaded bottom, and a shadow that
   says how far off the page a thing sits. That is all this section does.
   ========================================================================== */

/* cards: lit along the top edge, grounded by a real shadow */
.card,.shape,.note,.kb-card{
  background:linear-gradient(180deg,#141619 0%,#101214 45%,#0D0F11 100%);
  box-shadow:
    inset 0 1px 0 rgba(239,220,172,.07),
    0 10px 30px rgba(0,0,0,.42);
}
.card:hover,.shape:hover{
  box-shadow:
    inset 0 1px 0 rgba(239,220,172,.16),
    0 22px 52px rgba(0,0,0,.6),
    0 0 0 1px rgba(203,168,106,.18);
}

/* the product image sits in a well, not flush with the card face */
.card-img{box-shadow:inset 0 -1px 0 rgba(0,0,0,.6), inset 0 0 30px rgba(0,0,0,.35)}

/* full-bleed photo panels get a vignette so the edges do not glare */
.show-img::after,.hero-img::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  box-shadow:inset 0 0 140px rgba(0,0,0,.55);
}

/* a hairline of light where two dark sections meet */
.sec + .sec,.sec.tint{border-top:1px solid rgba(239,220,172,.055)}

/* the header gains weight once the page scrolls under it */
.hdr{box-shadow:0 1px 0 rgba(239,220,172,.06), 0 10px 30px rgba(0,0,0,.4)}

/* category tiles: inner frame, so the image reads as inset rather than pasted on */
.cat{box-shadow:inset 0 0 0 1px rgba(239,220,172,.06), 0 8px 24px rgba(0,0,0,.4)}
.cat:hover{box-shadow:inset 0 0 0 1px rgba(203,168,106,.3), 0 20px 48px rgba(0,0,0,.6)}

/* prices in brushed gold rather than flat gold */
.price,.sub b{
  background:linear-gradient(180deg,#FBEFD2 0%,var(--gold-light) 40%,var(--gold) 75%,#B08F4F 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.price small{
  -webkit-text-fill-color:var(--subtle); color:var(--subtle);
  background:none;
}

/* form fields: recessed, with a gold glow when focused */
.field input,.field select,.field textarea,.news{
  box-shadow:inset 0 1px 3px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.02);
}
.field input:focus,.field select:focus,.field textarea:focus{
  box-shadow:inset 0 1px 3px rgba(0,0,0,.5), 0 0 0 3px rgba(203,168,106,.14);
}

/* the drawer reads as a panel lifted off the page */
.drawer{
  background:linear-gradient(180deg,#101214 0%,#0A0B0D 100%);
  box-shadow:-34px 0 80px rgba(0,0,0,.7), inset 1px 0 0 rgba(239,220,172,.08);
}

/* trust row icons get a faint gold halo */
.trust svg,.step i{filter:drop-shadow(0 0 7px rgba(203,168,106,.35))}
.step i{
  background:linear-gradient(180deg,rgba(203,168,106,.14),rgba(203,168,106,.03));
  box-shadow:inset 0 1px 0 rgba(239,220,172,.18);
}

/* section kickers pick up a small gold rule, like a letterpress mark */
.kicker{display:flex; align-items:center; gap:10px}
.kicker::after{
  content:""; flex:1; max-width:42px; height:1px;
  background:linear-gradient(90deg,var(--gold),transparent);
  opacity:.6;
}
.gx-pagehero .kicker::after,.phero .kicker::after{max-width:56px}

@media (prefers-reduced-motion:reduce){
  .card:hover,.shape:hover,.cat:hover{box-shadow:inset 0 1px 0 rgba(239,220,172,.07), 0 10px 30px rgba(0,0,0,.42)}
}