/* Hero light: one gold light crosses "Bersinar", flares its star, then travels on
   across the photo and catches the ring and bracelets. Everything below runs on one
   clock (--kd-cycle) and is started in the same frame by shine.js, so it stays in step.
   Positions on the photo come from shine.js; nothing here knows pixels. */

.kd-hero { --kd-cycle: 4.2s; }

/* ---------- 1. "Bersinar" ---------- */
/* Two layers clipped to the text: a narrow travelling highlight over a still gold
   gradient. The highlight is off the word at both ends of its run, so the loop has
   no visible jump. Added by shine.js; without JS the site's own shimmer stays. */
.kd-hero-heading .kd-script.kd-sync {
  background:
    /* the base stays a deep gold (no pale stop), so the white band has something to stand out from */
    linear-gradient(105deg, transparent 40%, rgba(255, 240, 200, .7) 46%, #fffef6 50%, rgba(255, 240, 200, .7) 54%, transparent 60%) 82% 0 / 300% 100% no-repeat,
    linear-gradient(95deg, #7a4e0c 0%, var(--kd-gold-deep) 22%, var(--kd-gold-bright) 50%, var(--kd-gold-deep) 78%, #7a4e0c 100%) 0 0 / 100% 100% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: kd-sync-word var(--kd-cycle) linear infinite;
}
.kd-hero-heading .kd-script.kd-sync svg {
  animation: kd-sync-flare var(--kd-cycle) ease-in-out infinite;
  transform-origin: 50% 50%;
}
@keyframes kd-sync-word {
  0%        { background-position: 82% 0, 0 0; }
  28%, 100% { background-position: 17% 0, 0 0; }
}
/* scale and glow only: the site's star path is skewed (its points sit at 0,8.5 / 12,0 /
   24,15.5 / 12,24), so any rotation shows it as an hourglass */
@keyframes kd-sync-flare {
  0%, 18%   { transform: scale(.85); opacity: .75; filter: drop-shadow(0 0 4px rgba(226, 172, 46, .5)); }
  30%       { transform: scale(1.3); opacity: 1; filter: drop-shadow(0 0 10px rgba(255, 214, 120, 1)); }
  44%, 100% { transform: scale(.85); opacity: .75; filter: drop-shadow(0 0 4px rgba(226, 172, 46, .5)); }
}

/* ---------- 2. The jewellery ---------- */
.kd-shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

/* warm halo behind each piece, brightest as the light arrives */
.kd-shine-glow {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 236, 190, .45), rgba(255, 226, 160, .12) 60%, transparent);
  mix-blend-mode: screen;
  filter: blur(4px);
  opacity: 0;
  animation: kd-shine-breathe var(--kd-cycle) ease-in-out infinite;
}

/* The light sweep. It covers the whole photo but is masked by jewel-mask.png, an
   alpha cut-out of the gold made from the photo itself, so it can only ever light
   pixels that are jewellery - never the skin beside a strand. */
.kd-shine-gold {
  position: absolute;
  -webkit-mask: url(/assets/custom/jewel-mask.png) 0 0 / 100% 100% no-repeat;
  mask: url(/assets/custom/jewel-mask.png) 0 0 / 100% 100% no-repeat;
  overflow: hidden;
}
/* No constant tint: between passes the photo must be exactly the original. A warm
   tint here turned the white- and rose-gold beads of the tri-colour bracelets yellow. */
.kd-shine-tint { display: none; }
.kd-shine-sweep {
  position: absolute;
  inset: 0;
  mix-blend-mode: color-dodge;
  /* peak kept near half strength: color-dodge at full strength burns the beads to flat white.
     Near-white, not warm, so rose and white gold stay their own colour as it passes. */
  background: linear-gradient(110deg,
    transparent 41%,
    rgba(255, 232, 178, .26) 46%,
    rgba(255, 240, 205, .58) 50%,
    rgba(255, 232, 178, .26) 54%,
    transparent 59%) no-repeat;
  background-size: 300% 100%;
  background-position: 100% 0;
  animation: kd-shine-sweep var(--kd-cycle) linear infinite;
}

/* four-point star glints, after the light has passed */
.kd-shine-star {
  position: absolute;
  width: var(--kd-star, 18px);
  height: var(--kd-star, 18px);
  margin: calc(var(--kd-star, 18px) / -2) 0 0 calc(var(--kd-star, 18px) / -2);
  background: radial-gradient(circle, #fff 0 12%, rgba(255, 240, 190, .9) 22%, transparent 60%);
  clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
  filter: drop-shadow(0 0 3px rgba(255, 220, 130, .95)) drop-shadow(0 0 6px rgba(255, 200, 90, .6));
  opacity: 0;
  transform: scale(.2) rotate(0deg);
  animation: kd-shine-twinkle var(--kd-cycle) ease-in-out infinite;
  animation-delay: var(--kd-delay, 0s);
}

/* the light leaves "Bersinar" at 28%; it crosses the photo from 30% to 70%
   and is on the gold at about 46% */
@keyframes kd-shine-sweep {
  0%, 30%   { background-position: 100% 0; }
  70%, 100% { background-position: 0 0; }
}
@keyframes kd-shine-twinkle {
  0%, 46%, 100% { opacity: 0; transform: scale(.2) rotate(0deg); }
  55%           { opacity: 1; transform: scale(1) rotate(45deg); }
  66%           { opacity: .15; transform: scale(.45) rotate(90deg); }
  72%           { opacity: 0; transform: scale(.2) rotate(90deg); }
}
/* the halo exists only while the light is on the gold; at rest it is fully off */
@keyframes kd-shine-breathe {
  0%, 38%, 62%, 100% { opacity: 0; }
  48%                { opacity: .5; }
}

/* ---------- 3. Shop the photo ---------- */
.kd-hot-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}
.kd-hot {
  position: absolute;
  width: 44px;                 /* full touch target */
  height: 44px;
  margin: -22px 0 0 -22px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  pointer-events: auto;
  border-radius: 50%;
  z-index: 1;
}
/* No visible marker: dots on her hand read as stray specks, so they were removed.
   The 44px button stays an invisible tap target over each piece; keyboard focus
   still draws its outline (below). */
.kd-hot:focus-visible { outline: 3px solid var(--kd-gold, #b8860b); outline-offset: 2px; }

.kd-hot-card {
  position: absolute;
  width: 210px;
  padding: 14px 16px 14px;
  background: #fffdf8;
  border: 1px solid var(--kd-gold-line, #e7d3a4);
  border-radius: 10px;
  box-shadow: 0 16px 34px -10px rgba(60, 40, 0, .35);
  font-family: var(--kd-font-ui, inherit);
  color: var(--kd-ink, #2a2118);
  text-align: left;            /* the hero centres its text on phones; the card must not */
  pointer-events: auto;
  z-index: 2;                  /* above every marker: a later marker otherwise painted over an open card */
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease;
}
.kd-hot-card.is-open { opacity: 1; transform: none; }
.kd-hot-card[hidden] { display: none !important; }
.kd-hot-card small {
  display: block;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--kd-ink-soft, #6b5d4d);
  font-weight: 600;
}
.kd-hot-card strong {
  display: block;
  margin: 2px 0 10px;
  font-family: var(--kd-font-display, serif);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
}
.kd-hot-card a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #8a5a10;
  text-decoration: none;
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 1px;
}
.kd-hot-card a:hover { color: #6e4408; }
.kd-hot-card .kd-hot-close {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 32px;
  height: 32px;
  border: 0;
  background: none;
  font-size: 20px;
  line-height: 1;
  color: var(--kd-ink-soft, #6b5d4d);
  cursor: pointer;
  border-radius: 6px;
}
.kd-hot-card .kd-hot-close:focus-visible { outline: 2px solid var(--kd-gold, #b8860b); }

/* The site stops its hero animations on the FIRST scroll and never restarts them
   (body.ken-scrolled, to keep taps fast further down). Following that rule froze the
   light for good - and on a phone you must scroll to reach the photo, so nobody there
   ever saw it. Instead the light pauses only while the hero is off-screen (shine.js
   sets .kd-light-off), which keeps the site's intent: no work while you read below. */
.kd-hero.kd-light-off .kd-shine *,
.kd-hero.kd-light-off .kd-hero-heading .kd-script.kd-sync,
.kd-hero.kd-light-off .kd-hero-heading .kd-script.kd-sync svg { animation-play-state: paused; }
/* undo the site's scroll rule for our highlight only: (0,4,0) outranks its (0,3,1) */
.kd-hero .kd-hero-heading .kd-script.kd-sync { animation: kd-sync-word var(--kd-cycle) linear infinite; }

/* motion off: a still, gently lit picture and no pulsing */
@media (prefers-reduced-motion: reduce) {
  .kd-hero-heading .kd-script.kd-sync { animation: none; background-position: 50% 0, 0 0; }
  .kd-hero-heading .kd-script.kd-sync svg { animation: none; }
  .kd-shine-sweep { animation: none; background-position: 40% 0; opacity: .6; }
  .kd-shine-glow { animation: none; opacity: 0; }
  .kd-shine-star { animation: none; }
  .kd-shine-star[data-still] { opacity: .9; transform: scale(.8) rotate(45deg); }
  .kd-hot-card { transition: none; }
}