/* Hero — one object on a dark stage: the keyring hangs on a chain under a spotlight,
   with a single headline and one button beneath it. */
.kr-hero{
  --kr-light:0;
  --kr-reveal:0;
  --kr-reveal-2:0;
  --kr-floor:62svh;
  --kr-ink:var(--v2-paper,#f4f1ea);
  --kr-bg:var(--v2-bg,#0b0c0d);
  --kr-cx:50%;
  --kr-cy:30%;
  position:relative;
  height:100svh;
  min-height:620px;
  background:var(--kr-bg);
}

/* the wall is a touch darker than the page, then melts into the next section's colour */
.kr-scene{
  position:relative;
  height:100%;
  overflow:hidden;
  isolation:isolate;
  background:
    linear-gradient(to bottom,transparent 72%,var(--kr-bg)),
    radial-gradient(ellipse 70% 60% at var(--kr-cx) var(--kr-cy),#121216,#070708 75%);
}

/* Backdrop ---------------------------------------------------------------- */
.kr-backdrop{
  position:absolute;z-index:0;inset:0;pointer-events:none;opacity:var(--kr-light);
  /* everything fades out before the bottom edge so the hero ends on the exact page colour */
  -webkit-mask-image:linear-gradient(to bottom,#000 58%,transparent 90%);
  mask-image:linear-gradient(to bottom,#000 58%,transparent 90%);
}

/* orbit rings centred on the key ring, each with a slow sweep of light running around it */
.kr-orbit{
  position:absolute;
  left:var(--kr-cx);
  top:var(--kr-cy);
  width:var(--d);
  aspect-ratio:1;
  translate:-50% -50%;
  border-radius:50%;
  -webkit-mask-image:linear-gradient(to bottom,#000 38%,transparent 78%);
  mask-image:linear-gradient(to bottom,#000 38%,transparent 78%);
}
.kr-orbit::before,.kr-orbit::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:50%;
  -webkit-mask:radial-gradient(closest-side,transparent calc(100% - 1.5px),#000 calc(100% - 1px),#000 100%,transparent 100%);
  mask:radial-gradient(closest-side,transparent calc(100% - 1.5px),#000 calc(100% - 1px),#000 100%,transparent 100%);
}
.kr-orbit::before{background:rgba(244,241,234,var(--line,.07))}
.kr-orbit::after{
  background:conic-gradient(from 0deg,transparent 0 62%,rgba(244,241,234,.08) 80%,rgba(244,241,234,.55) 96%,transparent 100%);
  animation:kr-orbit var(--t,40s) linear infinite;
  animation-delay:var(--delay,0s);
}
.kr-orbit:nth-child(1){--d:min(58vw,78vh);--t:34s;--line:.12}
.kr-orbit:nth-child(2){--d:min(92vw,124vh);--t:52s;--delay:-20s;--line:.09}
.kr-orbit:nth-child(3){--d:min(132vw,178vh);--t:76s;--delay:-41s;--line:.07}
.kr-orbit:nth-child(2)::after{animation-direction:reverse}
@keyframes kr-orbit{to{transform:rotate(1turn)}}

/* a jog-wheel dial between the first two orbits: fine ticks, a longer one every 10 degrees */
.kr-dial{
  position:absolute;
  left:var(--kr-cx);
  top:var(--kr-cy);
  width:min(74vw,100vh);
  aspect-ratio:1;
  translate:-50% -50%;
  border-radius:50%;
  background:
    repeating-conic-gradient(from -.15deg,rgba(244,241,234,.2) 0 .3deg,transparent .3deg 10deg),
    repeating-conic-gradient(from -.1deg,rgba(244,241,234,.1) 0 .2deg,transparent .2deg 2deg);
  -webkit-mask:
    radial-gradient(closest-side,transparent calc(100% - 14px),#000 calc(100% - 13px),#000 100%,transparent 100%),
    linear-gradient(to bottom,#000 30%,transparent 72%);
  -webkit-mask-composite:source-in;
  mask:
    radial-gradient(closest-side,transparent calc(100% - 14px),#000 calc(100% - 13px),#000 100%,transparent 100%) intersect,
    linear-gradient(to bottom,#000 30%,transparent 72%);
  animation:kr-orbit 240s linear infinite reverse;
}

/* film grain + side vignette keep the dark from looking flat */
.kr-backdrop::before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse 75% 90% at 50% 40%,transparent 55%,rgba(0,0,0,.55));
}
.kr-backdrop::after{
  content:'';
  position:absolute;
  inset:-50%;
  opacity:.07;
  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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:kr-grain 1.2s steps(6) infinite;
}
@keyframes kr-grain{
  0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}
  60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}
}

/* spotlight cone from above, and the pool of light it leaves under the keyring */
.kr-scene::before{
  content:'';
  position:absolute;
  z-index:0;
  left:0;
  right:0;
  top:0;
  height:calc(var(--kr-floor) + 18%);
  background:conic-gradient(from 180deg at 50% -14%,rgba(244,241,234,.1) 0deg,rgba(244,241,234,.06) 10deg,transparent 19deg,transparent 341deg,rgba(244,241,234,.06) 350deg,rgba(244,241,234,.1) 360deg);
  -webkit-mask-image:linear-gradient(to bottom,#000 30%,transparent);
  mask-image:linear-gradient(to bottom,#000 30%,transparent);
  opacity:var(--kr-light);
  pointer-events:none;
}
.kr-scene::after{
  content:'';
  position:absolute;
  z-index:0;
  left:50%;
  top:var(--kr-floor);
  width:min(58vw,820px);
  height:120px;
  translate:-50% -30%;
  background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(244,241,234,.08),transparent 70%);
  opacity:var(--kr-light);
  pointer-events:none;
}

.kr-hero .v2-header{z-index:30!important;opacity:1!important}

/* Keyring stage — 1 unit = 1 pixel of the ring render. */
.kr-stage{
  position:absolute;
  z-index:2;
  left:0;
  top:0;
  width:1312px;
  height:1199px;
  transform-origin:0 0;
  will-change:transform;
  pointer-events:none;
}
.kr-hero:not(.is-ready) .kr-stage{visibility:hidden}
.kr-ring,.kr-charm{
  position:absolute;
  left:0;
  top:0;
  max-width:none;
  height:auto;
  user-select:none;
  -webkit-user-drag:none;
  will-change:transform;
  backface-visibility:visible;
  filter:drop-shadow(0 22px 22px rgba(0,0,0,.55));
}
.kr-ring{z-index:10;width:1312px}
/* the chain the keyring hangs from: the charms' own chain link, tiled up out of the frame */
.kr-chain{
  position:absolute;
  z-index:1;
  width:120px;
  background:url("../images/hero/charms/chain.webp") center bottom/120px 120px repeat-y;
  filter:drop-shadow(0 18px 18px rgba(0,0,0,.45));
}
.kr-hole-glow{
  position:absolute;
  z-index:0;
  border-radius:50%;
  background:radial-gradient(circle,rgba(157,140,255,.32),rgba(157,140,255,.08) 46%,transparent 70%);
  filter:blur(18px);
}

/* Headline + button ------------------------------------------------------ */
.kr-copy{
  position:absolute;
  z-index:5;
  left:20px;
  right:20px;
  top:calc(var(--kr-floor) + clamp(18px,4vh,44px));
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.kr-title{
  margin:0;
  font:500 clamp(2.3rem,min(5vw,8.6vh),5.2rem)/.96 'DM Sans',sans-serif;
  letter-spacing:-.04em;
  text-transform:uppercase;
}
.kr-line{display:block;overflow:hidden;padding:0 .04em .06em}
.kr-line b{
  display:block;
  font-weight:500;
  background:linear-gradient(180deg,#fff 30%,#a9a7a2);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  transform:translate3d(0,calc((1 - var(--kr-reveal)) * 110%),0);
}
.kr-line + .kr-line b{transform:translate3d(0,calc((1 - var(--kr-reveal)) * 150%),0)}
/* the two key words carry the accent, in the same top-lit gradient as the rest of the line */
.kr-line em{
  font-style:normal;
  background:linear-gradient(180deg,#d6ceff 25%,var(--v2-accent,#9d8cff) 75%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* scroll cue: leads into the video reel right below instead of skipping past it */
.kr-hero .kr-scroll{
  position:absolute;
  z-index:5;
  left:50%;
  bottom:clamp(18px,3.4vh,34px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  translate:-50% 0;
  color:rgba(244,241,234,.55);
  font:600 10px/1 'DM Sans',sans-serif;
  letter-spacing:.32em;
  text-indent:.32em;
  text-transform:uppercase;
  text-decoration:none;
  opacity:var(--kr-reveal-2);
  transform:translate3d(0,calc((1 - var(--kr-reveal-2)) * 12px),0);
  transition:color .3s;
}
.kr-hero .kr-scroll:hover{color:var(--kr-ink)}
.kr-scroll i{position:relative;display:block;width:1px;height:clamp(40px,6vh,58px);overflow:hidden;background:rgba(244,241,234,.14)}
.kr-scroll i::after{
  content:'';
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:40%;
  background:linear-gradient(to bottom,transparent,var(--kr-ink));
  animation:kr-scroll-drop 2s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes kr-scroll-drop{from{transform:translateY(-100%)}to{transform:translateY(250%)}}
.kr-hero:not(.is-ready) .kr-scroll{pointer-events:none}

@media(max-width:1100px){
  .kr-title{font-size:clamp(2.4rem,7.4vw,4.2rem)}
}

@media(max-width:760px){
  .kr-hero{min-height:560px}
  .kr-title{font-size:clamp(2rem,10.4vw,3rem)}
}

@media(prefers-reduced-motion:reduce){
  .kr-hero{--kr-light:1;--kr-reveal:1;--kr-reveal-2:1}
  .kr-orbit::after,.kr-dial,.kr-backdrop::after,.kr-scroll i::after{animation:none}
}

/* 3D keyring (hero-keyring-3d.js) draws into a full-size canvas instead of the image stage */
.kr-canvas{position:absolute;z-index:2;inset:0;display:block;width:100%;height:100%;pointer-events:none}
.kr-hero:not(.is-ready) .kr-canvas{visibility:hidden}