/*
 * Interaction layer over styles.css: hover states, cursor light, scroll
 * reveals and the suit-cycling emblem. Everything here is additive, and the
 * prefers-reduced-motion rule in styles.css already switches off its
 * transitions and animations.
 */

:root {
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-in-out: cubic-bezier(.65, 0, .15, 1);
}

::selection { background: #c6ad7f55; }

/* ---------- Header: sticky, frosted once the page moves ---------- */

.header {
  position: sticky;
  top: 0;
  transition: background-color .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.header.is-scrolled {
  /* Nearly opaque: over the ivory sections a lighter ink turns muddy grey. */
  background: rgba(17, 22, 20, .93);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom-color: #c6ad7f24;
  box-shadow: 0 14px 34px -18px rgba(0, 0, 0, .55);
}

nav > a:not(.nav-cta) {
  position: relative;
  transition: color .25s ease;
}
nav > a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--ease-out);
}
nav > a:not(.nav-cta):hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav-cta {
  background: linear-gradient(var(--gold), var(--gold)) no-repeat 0 100% / 100% 0;
  transition: background-size .45s var(--ease-out), color .3s ease, border-color .3s ease;
}
.nav-cta:hover {
  background-size: 100% 100%;
  border-color: var(--gold);
  color: var(--ink);
}

/* ---------- Arrows that answer the cursor ---------- */

.button span,
.nav-cta span,
.quiet-link span,
.text-link span,
.footer-top > div a span,
.form-heading > span:last-child {
  display: inline-block;
  transition: transform .4s var(--ease-out);
}
.button:hover span,
.nav-cta:hover span,
.quiet-link:hover span,
.text-link:not(.ivory):hover span,
.footer-top > div a:hover span,
.inquiry-form:focus-within .form-heading > span:last-child {
  transform: translate(3px, -3px);
}
.text-link.ivory:hover span { transform: translateY(4px); }

/* Drawn over the existing gold border rather than above it. */
.text-link {
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px border-box;
  transition: background-size .5s var(--ease-out), color .25s ease;
}
.text-link:hover { background-size: 100% 1px; }
.text-link.ivory:hover { color: var(--ivory); }

.quiet-link,
.footer-top > div a,
.form-privacy a {
  transition: color .25s ease, border-color .25s ease;
}

/* ---------- Buttons: inner highlight and a single sheen pass ---------- */

.button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: background-color .25s ease, color .25s ease, box-shadow .3s ease, transform .3s var(--ease-out);
}
.button.gold { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28); }
.button.dark,
.hero-price .button.gold { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); }
.button::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .22) 50%, transparent 65%);
  transform: translateX(-110%);
}
.button:not(:disabled):hover::after {
  transform: translateX(110%);
  transition: transform .9s var(--ease-in-out);
}
.button:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 10px 24px -12px rgba(17, 22, 20, .55);
}
.button:not(:disabled):active { transform: translateY(0); }

/* ---------- Cursor light on cards ---------- */

/* Isolated so the light sits above the card's background but under its content. */
.spot { position: relative; isolation: isolate; }
.spot::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s ease;
  background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 50%), rgba(198, 173, 127, .09), transparent 55%);
}
.spot.is-lit::after { opacity: 1; }
/* Light cards take a white sheen rather than gold, which would only muddy them. */
.hero-price.spot::after,
.inquiry-form.spot::after {
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .55), transparent 55%);
}

.hero-price,
.inquiry-form {
  transition: box-shadow .5s ease, border-color .5s ease;
}
.hero-price:hover { box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); }
.inquiry-form:hover,
.inquiry-form:focus-within {
  border-color: #cbbf9f;
  box-shadow: 0 30px 60px -38px rgba(17, 22, 20, .35);
}

/* ---------- Hero: faint dot field, slow intro ---------- */

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(198, 173, 127, .16) 1px, transparent 1.2px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 70% 0%, #000 0%, transparent 70%);
  mask-image: radial-gradient(ellipse 75% 70% at 70% 0%, #000 0%, transparent 70%);
}

.available i { position: relative; }
.available i::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--gold);
  animation: uc-pulse 2.8s ease-out infinite;
}
@keyframes uc-pulse {
  0% { transform: scale(1); opacity: .55; }
  70%, 100% { transform: scale(3.2); opacity: 0; }
}

.motion .hero-name .domain-wordmark {
  animation: uc-wipe 1.5s var(--ease-in-out) .1s both;
}
.motion .hero-top,
.motion .hero-bottom > *,
.motion .hero-foot {
  animation: uc-rise 1s var(--ease-out) both;
}
.motion .hero-top { animation-delay: .05s; }
.motion .hero-bottom > :first-child { animation-delay: .55s; }
.motion .hero-bottom > :last-child { animation-delay: .7s; }
.motion .hero-foot { animation-delay: .9s; }
@keyframes uc-wipe {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
@keyframes uc-rise {
  from { opacity: 0; transform: translateY(14px); }
}

/* ---------- Scroll reveal ---------- */

.motion .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .9s ease, transform 1s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.motion .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* ---------- Lists that respond to the cursor ---------- */

.attributes article,
.steps article { position: relative; }
.attributes article::before,
.step-number::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: #a18b61;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .7s var(--ease-out);
}
.attributes article::before { top: -1px; }
.step-number { position: relative; transition: color .4s ease; }
.step-number::after { bottom: -1px; }
.attributes article:hover::before,
.steps article:hover .step-number::after { transform: scaleX(1); }
.steps article:hover .step-number { color: #8a7753; }
.attributes article > span { transition: color .4s ease; }
.attributes article:hover > span { color: var(--ink); }

.specs > div {
  transition: background-color .35s ease, padding .45s var(--ease-out);
}
.specs > div:hover {
  background: linear-gradient(90deg, #c6ad7f14, transparent 80%);
  padding-left: 10px;
  padding-right: 4px;
}

summary { transition: color .25s ease; }
summary:hover { color: #6f5f42; }
summary span { transition: transform .45s var(--ease-out); }

.faq-items details { interpolate-size: allow-keywords; }
.faq-items details::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size .5s var(--ease-out), content-visibility .5s allow-discrete;
}
.faq-items details[open]::details-content { block-size: auto; }

/* ---------- Form fields ---------- */

label { transition: color .25s ease; }
label:focus-within { color: #6f5f42; }
input,
textarea { transition: border-color .3s ease, box-shadow .3s ease; }

/* ---------- Identity showcase ---------- */

.identity-main:before { transition: border-color .6s ease, inset .8s var(--ease-out); }
.identity-main:hover:before { border-color: #c6ad7f66; }
.identity-watermark { transition: opacity 1s ease, transform 1.4s var(--ease-out); }
.identity-main:hover .identity-watermark { opacity: .045; transform: translate(-6px, -6px); }
.crest-paper,
.identity-type { transition: background-color .5s ease; }
.crest-paper:hover { background: #f1ede3; }

/* ---------- Emblem: the pip above the U deals the four suits ---------- */

.suit {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  transform: scale(.5) translateY(30%);
  transition: opacity .45s ease, transform .7s var(--ease-out);
}
.suit.is-on {
  opacity: 1;
  transform: none;
}
.suit.is-off {
  opacity: 0;
  transform: scale(1.3) translateY(-35%);
}
svg[data-suits] { transition: filter .6s ease; }
svg[data-suits].is-dealing { filter: drop-shadow(0 0 7px rgba(198, 173, 127, .38)); }
.crest-paper svg[data-suits].is-dealing { filter: drop-shadow(0 0 6px rgba(144, 121, 82, .25)); }