/* Kinetic skin. Loaded only when this theme is selected. Editorial stays on :root. */

@font-face {
  font-family: "Bodoni PT";
  src: local("Bodoni PT"), local("Bodoni PT Regular"), url("../fonts/bodoni-pt/BodoniPT-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Bodoni PT";
  src: local("Bodoni PT Medium"), url("../fonts/bodoni-pt/BodoniPT-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Bodoni PT";
  src: local("Bodoni PT Italic"), url("../fonts/bodoni-pt/BodoniPT-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Bodoni PT";
  src: local("Bodoni PT Medium Italic"), url("../fonts/bodoni-pt/BodoniPT-MediumItalic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

html.skin-kinetic {
  --background: oklch(0.975 0.012 55);
  --foreground: oklch(0.33 0.02 40);
  --card: oklch(0.99 0.008 60);
  --card-foreground: oklch(0.33 0.02 40);
  --primary: oklch(0.42 0.028 42);
  --primary-foreground: oklch(0.98 0.01 70);
  --secondary: oklch(0.95 0.016 45);
  --secondary-foreground: oklch(0.33 0.02 40);
  --muted: oklch(0.94 0.018 35);
  --muted-foreground: oklch(0.5 0.02 40);
  --accent: oklch(0.7 0.055 18);
  --accent-foreground: oklch(0.33 0.02 40);
  --violet: oklch(0.84 0.028 330);
  --violet-foreground: oklch(0.33 0.02 40);
  --border: oklch(0.9 0.014 50);
  --input: oklch(0.9 0.014 50);
  --ring: oklch(0.7 0.055 18);
  --radius: 0.35rem;
}

html.skin-kinetic.dark {
  --background: oklch(0.22 0.018 40);
  --foreground: oklch(0.94 0.014 70);
  --card: oklch(0.26 0.02 40);
  --card-foreground: oklch(0.94 0.014 70);
  --primary: oklch(0.94 0.014 70);
  --primary-foreground: oklch(0.26 0.02 40);
  --secondary: oklch(0.3 0.02 40);
  --secondary-foreground: oklch(0.94 0.014 70);
  --muted: oklch(0.3 0.018 40);
  --muted-foreground: oklch(0.78 0.02 60);
  --accent: oklch(0.78 0.045 22);
  --accent-foreground: oklch(0.24 0.02 40);
  --violet: oklch(0.48 0.04 330);
  --violet-foreground: oklch(0.94 0.014 70);
  --border: oklch(0.36 0.018 40);
  --input: oklch(0.36 0.018 40);
  --ring: oklch(0.78 0.045 22);
}

html.skin-kinetic body {
  font-family: Outfit, system-ui, sans-serif;
  font-weight: 300;
  background:
    radial-gradient(880px 480px at 100% -10%, color-mix(in oklch, var(--accent) 16%, transparent), transparent 62%),
    radial-gradient(680px 420px at -8% 12%, color-mix(in oklch, var(--violet) 55%, transparent), transparent 64%),
    var(--background);
}

html.skin-kinetic h1,
html.skin-kinetic h2,
html.skin-kinetic h3,
html.skin-kinetic h4,
html.skin-kinetic .brand,
html.skin-kinetic .page-loader-mark span,
html.skin-kinetic .soon-panel h1,
html.skin-kinetic .company-ticker li,
html.skin-kinetic .visit-notice-title {
  font-family: "Bodoni PT", "Playfair Display", Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.02em;
}

html.skin-kinetic .hero-subtitle,
html.skin-kinetic .company-ticker li {
  font-family: "Bodoni PT", Georgia, serif;
  font-style: italic;
  font-weight: 500;
}

html.skin-kinetic .eyebrow {
  display: inline-flex;
  align-self: center;
  width: fit-content;
  align-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--accent);
  font-family: "Bodoni PT", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

html.skin-kinetic .hero h1 {
  font-size: clamp(3.6rem, 8vw, 7.4rem);
  font-weight: 500;
  line-height: 0.96;
}

html.skin-kinetic .hero-subtitle {
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  letter-spacing: 0;
  text-transform: none;
}

html.skin-kinetic .section-heading h2,
html.skin-kinetic .article-header h1 {
  font-size: clamp(2.6rem, 5vw, 4.4rem);
  line-height: 0.98;
}

html.skin-kinetic .btn {
  border-radius: 0;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.68rem;
  font-weight: 400;
}

html.skin-kinetic .btn-primary {
  background: var(--primary);
  transition: background 0.4s ease, color 0.4s ease;
}

html.skin-kinetic .btn-primary:hover {
  background: color-mix(in oklch, var(--accent) 55%, var(--primary));
  color: var(--primary-foreground);
}

html.skin-kinetic .btn-outline-accent {
  border-color: color-mix(in oklch, var(--foreground) 22%, var(--border));
  color: var(--foreground);
  background: transparent;
}

html.skin-kinetic .btn-outline-accent:hover {
  background: color-mix(in oklch, var(--accent) 16%, var(--background));
  border-color: var(--accent);
  color: var(--foreground);
}

html.skin-kinetic .site-nav.is-scrolled,
html.skin-kinetic body.nav-open .site-nav {
  background: color-mix(in oklch, var(--background) 78%, transparent);
  border-bottom-color: color-mix(in oklch, var(--accent) 28%, var(--border));
}

html.skin-kinetic .nav-links a {
  position: relative;
}

html.skin-kinetic .nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.35rem;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

html.skin-kinetic .nav-links a:hover::after,
html.skin-kinetic .nav-links a[aria-current="page"]::after {
  transform: scaleX(1);
}

html.skin-kinetic .highlight,
html.skin-kinetic .exp-card,
html.skin-kinetic .edu-card,
html.skin-kinetic .journal-row,
html.skin-kinetic .look-product {
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.45s ease, background 0.45s ease;
}

html.skin-kinetic .highlight,
html.skin-kinetic .exp-card,
html.skin-kinetic .edu-card {
  background: color-mix(in oklch, var(--card) 86%, var(--background));
  border-color: color-mix(in oklch, var(--accent) 22%, var(--border));
  box-shadow: none;
}

html.skin-kinetic .highlight:hover,
html.skin-kinetic .exp-card:hover,
html.skin-kinetic .edu-card:hover,
html.skin-kinetic .look-product:hover {
  transform: translateY(-3px);
  border-color: color-mix(in oklch, var(--accent) 45%, var(--border));
}

html.skin-kinetic .journal-row:hover h3 {
  letter-spacing: -0.045em;
}

html.skin-kinetic .company-ticker {
  background: color-mix(in oklch, var(--foreground) 4%, var(--background));
  border-color: color-mix(in oklch, var(--accent) 40%, var(--border));
}

html.skin-kinetic .piece-button,
html.skin-kinetic .share-menu {
  border-radius: 0;
}

html.skin-kinetic .page-loader {
  display: none;
}

html.skin-kinetic.motion .page-loader {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  background: var(--background);
  animation: loaderLeave 0.85s cubic-bezier(0.77, 0, 0.18, 1) 2.2s forwards;
}

html.skin-kinetic.motion .page-loader.is-done {
  animation: loaderLeave 0.85s cubic-bezier(0.77, 0, 0.18, 1) forwards;
}

html.skin-kinetic .page-loader-mark {
  display: grid;
  justify-items: center;
  gap: 0.9rem;
  min-width: min(18rem, 80vw);
}

html.skin-kinetic .page-loader-mark span {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
}

html.skin-kinetic .page-loader-mark i {
  display: block;
  height: 1px;
  width: 100%;
  border-radius: 0;
  background: color-mix(in oklch, var(--foreground) 12%, transparent);
  position: relative;
  overflow: hidden;
}

html.skin-kinetic .page-loader-mark i::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  background: var(--accent);
  animation: loaderBar 1s ease-in-out infinite;
}

html.skin-kinetic.motion .hero-inner .anim-fade > * {
  animation: kineticRise 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

html.skin-kinetic.motion .hero-inner .anim-fade > *:nth-child(2) { animation-delay: 0.08s; }
html.skin-kinetic.motion .hero-inner .anim-fade > *:nth-child(3) { animation-delay: 0.16s; }
html.skin-kinetic.motion .hero-inner .anim-fade > *:nth-child(4) { animation-delay: 0.24s; }
html.skin-kinetic.motion .hero-inner .anim-fade > *:nth-child(5) { animation-delay: 0.32s; }

html.skin-kinetic.motion .article-header > * {
  animation: kineticRise 0.85s cubic-bezier(0.16, 1, 0.3, 1) both;
}

html.skin-kinetic.motion .section,
html.skin-kinetic.motion .journal-row,
html.skin-kinetic.motion .article-prose,
html.skin-kinetic.motion .article-end,
html.skin-kinetic.motion .look-gallery,
html.skin-kinetic.motion .look-shop-block,
html.skin-kinetic.motion .soon-panel {
  opacity: 0;
  transform: translateY(32px);
}

html.skin-kinetic.motion .section.is-in,
html.skin-kinetic.motion .journal-row.is-in,
html.skin-kinetic.motion .article-prose.is-in,
html.skin-kinetic.motion .article-end.is-in,
html.skin-kinetic.motion .look-gallery.is-in,
html.skin-kinetic.motion .look-shop-block.is-in,
html.skin-kinetic.motion .soon-panel.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes kineticRise {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}

@keyframes loaderBar {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(280%); }
}

@keyframes loaderLeave {
  to { transform: translateY(-105%); visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  html.skin-kinetic .page-loader { display: none; }
  html.skin-kinetic .section,
  html.skin-kinetic .journal-row,
  html.skin-kinetic .article-prose,
  html.skin-kinetic .soon-panel {
    opacity: 1;
    transform: none;
  }
}