/* Three small effects for the home page. Each plays once, then the page is exactly
   as it was; nothing here changes how a photo or the jewellery looks at rest.
   Loaded in <head> (router.php) so the curve is hidden before the first paint. */

/* ---------- 1. Display-glass reflection on the product photos ----------
   The product photos are lifestyle shots (wrists, ankles, clothing), so a gold light
   would wash the skin. This is colourless glass glare, like the shop's display counter:
   it passes over the whole photo once and leaves nothing behind. effects.js adds
   .kd-glass to each photo link (a block whose box is exactly the image) and plays it
   when the card scrolls into view, and again on hover. */
.ken-product > a.kd-glass {
  position: relative;
  overflow: hidden;
  border-radius: .75rem .75rem 0 0;   /* the photo's own corners */
}
.ken-product > a.kd-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg,
    transparent 40%,
    rgba(255, 255, 255, .22) 47%,
    rgba(255, 255, 255, .38) 50%,
    rgba(255, 255, 255, .22) 53%,
    transparent 60%) no-repeat;
  background-size: 300% 100%;
  background-position: 100% 0;      /* the band starts off the left edge */
}
.ken-product > a.kd-glass.is-glinting::after {
  animation: kd-glass 1.1s cubic-bezier(.4, 0, .2, 1) both;
}
@keyframes kd-glass {
  from { background-position: 100% 0; }
  to   { background-position: 0 0; }   /* ...and ends off the right edge */
}

/* ---------- 2. Trust row: the three icons take turns, on repeat ----------
   One shared loop of 4.2 s (one pass of the light) for all three, started in the same
   frame when the row is seen (effects.js adds .kd-trust-live), so they never move
   together:  customers pulse 0-20%  ·  shield strikes 30-51%  ·  diamond turns 60-90%.
   (It was 8.4 s; halved on request. Each movement kept its own speed - only the rests
   between them got shorter.)
   Nothing ever disappears, so there is no flash if the script runs after first paint. */
.kd-trust-icon.kd-people,
.kd-trust-icon.kd-stamp { position: relative; }
.kd-trust-icon.kd-people::after,
.kd-trust-icon.kd-stamp::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 1.5px solid var(--kd-gold, #b8860b);
  opacity: 0;
  pointer-events: none;
}
.kd-trust-live .kd-people        { animation: kd-people-pulse var(--kd-cycle, 4.2s) ease-in-out infinite; }
.kd-trust-live .kd-people::after { animation: kd-people-ring  var(--kd-cycle, 4.2s) ease-out infinite; }
.kd-trust-live .kd-stamp         { animation: kd-stamp        var(--kd-cycle, 4.2s) cubic-bezier(.3, 0, .2, 1) infinite; }
.kd-trust-live .kd-stamp::after  { animation: kd-stamp-ring   var(--kd-cycle, 4.2s) ease-out infinite; }

/* customers: a soft swell with one halo leaving the circle (0.8 s) */
@keyframes kd-people-pulse {
  0%, 18%, 100% { transform: scale(1); }
  8%            { transform: scale(1.12); }
}
@keyframes kd-people-ring {
  0%, 3%    { opacity: 0; transform: scale(1); }
  6%        { opacity: .7; transform: scale(1); }
  20%, 100% { opacity: 0; transform: scale(1.6); }
}
/* shield: lifted and struck, one ring from the strike (the original 0.9 s strike, placed at 30%) */
@keyframes kd-stamp {
  0%, 30%, 51.4%, 100% { transform: scale(1); }
  37.5%                { transform: scale(1.22) translateY(-3px); }
  41.8%                { transform: scale(.88); }
  45.4%                { transform: scale(1.05); }
}
@keyframes kd-stamp-ring {
  0%, 41.1%   { opacity: 0; transform: scale(1); }
  42.4%       { opacity: .85; transform: scale(1); }
  51.4%, 100% { opacity: 0; transform: scale(1.75); }
}

/* ---------- 3. The hero's gold curve draws itself in, once ----------
   Pure CSS, so it works without the script. 698.4 is the path's measured length. */
.kd-swirl-line path {
  stroke-dasharray: 699;
  stroke-dashoffset: 699;
  animation: kd-swirl-draw 1.8s cubic-bezier(.45, 0, .2, 1) .25s forwards;
}
@keyframes kd-swirl-draw { to { stroke-dashoffset: 0; } }

/* ---------- 4. The gold rule under the heading draws in ----------
   As the light leaves "Bersinar" (28% of the 4.2 s light cycle, ~1.2 s) the rule is
   laid down left to right. It already slides in with the site's own kd-fadeUp, which
   animates transform, so the draw uses clip-path instead: two properties, no collision.
   Pure CSS with a backwards fill, so it is hidden from the first paint, no JS needed.
   The site's animation is repeated here because `animation` replaces the whole list. */
.kd-hero .kd-hero-rule {
  animation: kd-fadeUp .9s ease .2s forwards, kd-rule-draw .7s cubic-bezier(.45, 0, .2, 1) 1.15s both;
}
@keyframes kd-rule-draw {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* ---------- 5. The weighing promise is marked, once ----------
   effects.js wraps only "Kami timbang depan mata anda" / "We weigh it before your eyes"
   in this span; the text is unchanged. A soft gold highlighter stroke behind the lower
   half of the words - NOT a thin underline, which in body text reads as a link and
   invites a tap that goes nowhere. It is a background, so it adds no height, and on an
   inline span it continues onto the next line if the phrase wraps. */
.kd-promise {
  background: linear-gradient(rgba(226, 172, 46, .32), rgba(226, 172, 46, .32)) 0 88% / 0 .42em no-repeat;
}
.kd-promise.is-drawn {
  animation: kd-promise-draw .9s cubic-bezier(.45, 0, .2, 1) both;
}
@keyframes kd-promise-draw {
  from { background-size: 0 .42em; }
  to   { background-size: 100% .42em; }
}

/* ---------- 6. The light ends on the main button ----------
   The site's own gloss (.kd-btn-primary::before, played on hover) is replayed on the
   light's clock: after the light has crossed the jewellery, on the first pass and then
   every third. Same element, same look - nothing new is drawn. */
.kd-btn-primary.kd-glint::before {
  animation: kd-btn-glint .8s ease both;
}
@keyframes kd-btn-glint {
  from { left: -120%; }
  to   { left: 140%; }
}

/* ---------- 7. The Google star twinkles ----------
   effects.js wraps only the "★" of the hero rating pill (the text is unchanged). On the
   light's 4.2 s clock it brightens and pops at 86%, just after the button glint, then
   rests - so the movements on the page follow one another instead of all at once. */
.kd-star {
  display: inline-block;              /* transform needs a box; the text metrics are unchanged */
  transform-origin: 50% 55%;
  animation: kd-star-twinkle var(--kd-cycle, 4.2s) ease-in-out infinite;
}
/* a clear blink: dims, then flashes bright with a gold glow - twice - about 1 s in every
   4.2 s. A single 0.3 s pop was measured on 8% of frames and was easy to miss. */
@keyframes kd-star-twinkle {
  0%, 64%, 92%, 100% { transform: scale(1); opacity: 1; text-shadow: none; }
  68%, 80%           { transform: scale(.85); opacity: .35; text-shadow: none; }
  72%, 84%           { transform: scale(1.5); opacity: 1; text-shadow: 0 0 8px rgba(255, 214, 120, 1), 0 0 16px rgba(226, 172, 46, .8); }
  76%, 88%           { transform: scale(1); opacity: 1; text-shadow: 0 0 4px rgba(255, 214, 120, .6); }
}

/* ---------- 8. The diamond turns like a gem ----------
   Third in the trust row's shared loop (section 2): one turn on its vertical axis at
   60-90%, after the customers pulse and the shield strike. Only the icon turns; its
   circle stays still. */
.kd-gem { perspective: 120px; }
.kd-trust-live .kd-gem svg {
  animation: kd-gem-spin var(--kd-cycle, 4.2s) cubic-bezier(.45, 0, .2, 1) infinite;
}
@keyframes kd-gem-spin {
  0%, 60%   { transform: rotateY(0deg); }
  90%, 100% { transform: rotateY(360deg); }
}

/* like the light: no motion while the hero is off-screen (shine.js sets .kd-light-off) */
.kd-hero.kd-light-off .kd-star,
.kd-hero.kd-light-off .kd-trust-live .kd-people,
.kd-hero.kd-light-off .kd-trust-live .kd-people::after,
.kd-hero.kd-light-off .kd-trust-live .kd-stamp,
.kd-hero.kd-light-off .kd-trust-live .kd-stamp::after,
.kd-hero.kd-light-off .kd-trust-live .kd-gem svg { animation-play-state: paused; }

/* motion off: no glare, no strike, the curve, rule and underline simply there */
@media (prefers-reduced-motion: reduce) {
  .ken-product > a.kd-glass.is-glinting::after { animation: none; }
  .kd-trust-live .kd-people, .kd-trust-live .kd-people::after,
  .kd-trust-live .kd-stamp, .kd-trust-live .kd-stamp::after { animation: none; }
  .kd-swirl-line path { animation: none; stroke-dashoffset: 0; }
  .kd-hero .kd-hero-rule { animation: kd-fadeUp .9s ease .2s forwards; }
  .kd-promise, .kd-promise.is-drawn { animation: none; background-size: 100% .42em; }
  .kd-btn-primary.kd-glint::before { animation: none; }
  .kd-star, .kd-trust-live .kd-gem svg { animation: none; }
}