/* Title, introduction and buttons form one vertically centered, left-aligned group. */
.artwork-window { display: grid; place-items: center start; min-height: 700px; }
.window-caption {
  position: relative;
  inset: auto;
  width: calc(100% - 2 * var(--gutter));
  max-width: 1180px;
  margin-inline: var(--gutter);
  padding-block: 80px;
  text-align: left;
}
.window-caption h1 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .08em;
  font-size: clamp(82px, 12.8vw, 188px);
  line-height: 1;
  letter-spacing: -.035em;
  text-align: left;
}
.window-caption h1 > br { display: none; }
.window-caption h1 > .hero-firstline {
  font-size: 1.08em;
  font-weight: 600;
  letter-spacing: -.025em;
}
.window-caption h1 > span:last-child {
  font-size: .68em;
  font-weight: 400;
  letter-spacing: .015em;
}
.hero-title-line { position: relative; }
.hero-title-face { position: relative; display: inline-block; z-index: 1; }
.hero-title-echo {
  position: absolute;
  inset: -.045em auto auto .065em;
  color: transparent;
  -webkit-text-stroke: 1px #fff;
  opacity: .3;
  white-space: nowrap;
  pointer-events: none;
  user-select: none !important;
}
.hero-title-line::before, .hero-title-line::after {
  content: "";
  position: absolute;
  pointer-events: none;
  bottom: -.04em;
  left: -.025em;
}
.hero-title-line::before { width: calc(100% + .22em); height: 1px; background: linear-gradient(90deg, #ffffff60, #ffffff20 80%, transparent); }
.hero-title-line::after { left: -.08em; width: .07em; height: .07em; border-left: 1px solid #ffffff80; border-bottom: 1px solid #ffffff80; }
/* Rotate the two names inside the original word's fixed hover area. */
[data-name-switch] { cursor: pointer; }
[data-name-switch]:focus-visible { outline: 1px solid #fff; outline-offset: 10px; }
.hero-name-flip { position: relative; display: inline-block; perspective: 1000px; pointer-events: none; }
.hero-name-plane {
  display: block;
  position: relative;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  transition: transform .65s cubic-bezier(.22,.68,.18,1), opacity .35s ease;
}
.hero-name-original { transform: rotateX(0deg); opacity: 1; }
.hero-name-alternate { position: absolute; inset: 0; transform: rotateX(90deg); opacity: 0; }
[data-name-alternate="true"] .hero-name-original { transform: rotateX(-90deg); opacity: 0; }
[data-name-alternate="true"] .hero-name-alternate { transform: rotateX(0deg); opacity: 1; }
.motion-paused .hero-name-plane { transform: none !important; transition: none; }
.text-selection-active .hero-name-original { transform: none; opacity: 1; transition: none; }
.text-selection-active .hero-name-alternate { opacity: 0; transition: none; }
/* Fixed link targets; separate depth, idle motion, surface and lettering layers. */
.opening-baseline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: none;
  width: 100%;
  gap: 22px;
  margin-top: clamp(28px, 3vw, 42px);
}
.opening-baseline > p { text-align: left; max-width: 44ch; font-size: clamp(16px, 1.35vw, 20px); line-height: 1.65; color: #f5f5f5; }
.opening-actions {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: clamp(18px, 3vw, 46px);
  width: 100%;
  margin: 0;
  padding: 18px 0 26px;
  --parallax-x: 0px;
  --parallax-y: 0px;
}
.hero-button {
  --depth: 0px;
  --lift: 0px;
  --fan: 0deg;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --shine-x: 50%;
  --shine-y: 50%;
  position: relative;
  display: block;
  flex: 0 1 228px;
  height: 66px;
  border-radius: 999px;
  perspective: 800px;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
  outline-offset: 12px;
  -webkit-tap-highlight-color: transparent;
}
.hero-button:nth-child(1) { --idle-delay: -1s; --rest-angle: -2deg; --back-angle: 12deg; --button-accent: #ffbb45; --button-highlight: #ffd582; --button-glow: #ffbb4540; }
.hero-button:nth-child(2) { --idle-delay: -3s; --rest-angle: 0deg; --back-angle: 0deg; --button-accent: #41ddff; --button-highlight: #9aeeff; --button-glow: #41ddff40; }
.hero-button:nth-child(3) { --idle-delay: -5s; --rest-angle: 2deg; --back-angle: -12deg; --button-accent: #b38aff; --button-highlight: #d1b7ff; --button-glow: #b38aff40; }
.hero-button-depth, .hero-button-tilt, .hero-button-float, .hero-button-face {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  transform-style: preserve-3d;
}
.hero-button-depth {
  pointer-events: none;
  transform: translate3d(0, var(--lift), var(--depth)) rotateY(var(--fan));
  transition: transform .65s cubic-bezier(.22,.68,.18,1);
  will-change: transform;
}
.hero-button-tilt {
  transform: translate3d(var(--parallax-x), var(--parallax-y), 0) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  will-change: transform;
}
.hero-button-float { animation: hero-button-float 6s ease-in-out var(--idle-delay) infinite; }
.hero-button-float::before, .hero-button-float::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid color-mix(in srgb, var(--button-accent) 65%, transparent);
  background: color-mix(in srgb, var(--button-accent) 18%, #080a10);
  transform: translate3d(0, 7px, -18px);
  transition: transform .7s ease, border-color .5s ease;
}
.hero-button-float::before { transform: translate3d(0, 14px, -38px); border-color: color-mix(in srgb, var(--button-accent) 35%, transparent); }
.hero-button-face {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 26px;
  color: #081018;
  border: 1px solid color-mix(in srgb, var(--button-accent) 60%, #fff);
  background: radial-gradient(circle at var(--shine-x) var(--shine-y), #ffffff35, transparent 72%), var(--button-accent);
  box-shadow: 0 12px 30px #0008, 0 0 24px var(--button-glow), inset 0 1px #ffffff70;
  transition: color .4s ease, background-color .4s ease, box-shadow .6s ease, border-color .4s ease;
}
.hero-button-label { font-size: 13px; font-weight: 600; letter-spacing: .055em; white-space: nowrap; transform: translateZ(20px); }
.hero-button-arrow { font-size: 24px; font-weight: 400; transform: translateZ(30px); transition: transform .5s ease; }
.opening-actions:has(.hero-button.is-active) .hero-button:not(.is-active) { --depth: -400px; --lift: 12px; --fan: var(--back-angle); }
.opening-actions .hero-button.is-active { --depth: 125px; --lift: -8px; --fan: 0deg; z-index: 3; }
.hero-button.is-active .hero-button-face { background-color: var(--button-highlight); color: #081018; border-color: #fff; box-shadow: 0 30px 55px #0009, 0 0 44px var(--button-glow); }
.hero-button.is-active .hero-button-float::after { transform: translate3d(0, 11px, -28px); border-color: #ffffff85; }
.hero-button.is-active .hero-button-float::before { transform: translate3d(0, 22px, -58px); border-color: #ffffff50; }
.hero-button.is-active .hero-button-arrow { transform: translate3d(3px, -3px, 38px); }
.hero-button:focus-visible { outline: 2px solid #fff; }
@keyframes hero-button-float {
  0%, 100% { transform: translateY(3px) rotateZ(var(--rest-angle)); }
  50% { transform: translateY(-5px) rotateZ(0deg); }
}
@media (max-width: 760px) {
  .window-caption { padding-block: 70px; }
  .window-caption h1 { font-size: 17vw; }
  .hero-title-echo { -webkit-text-stroke-width: .7px; opacity: .26; }
  .opening-baseline { gap: 20px; }
  .opening-actions { gap: 16px; padding-inline: 0; }
  .hero-button { height: 60px; }
  .hero-button-face { padding-inline: 18px; }
  .hero-button-label { font-size: 12px; }
}
@media (max-width: 600px) {
  .opening-actions { flex-direction: column; gap: 16px; padding-block: 8px 20px; }
  .hero-button { flex: none; width: min(248px, 85%); height: 54px; }
  .window-caption { padding-block: 65px; }
  .artwork-window { min-height: 740px; }
  .opening-actions .hero-button.is-active { --depth: 55px; --lift: 0px; }
  .opening-actions:has(.hero-button.is-active) .hero-button:not(.is-active) { --depth: -180px; }
}
/* Touch links activate in one tap; motion controls also stop the new layers. */
:is(.motion-paused, .text-selection-active) .opening-actions *,
:is(.motion-paused, .text-selection-active) .hero-button-float::before,
:is(.motion-paused, .text-selection-active) .hero-button-float::after { animation-play-state: paused !important; transition: none !important; }
:is(.motion-paused, .text-selection-active) :is(.hero-button-depth, .hero-button-tilt) { transform: none; }
@media print { .hero-title-echo, .hero-title-line::before, .hero-title-line::after { display: none; } }
@media print {
  .hero-name-original { transform: none !important; opacity: 1 !important; }
  .hero-name-alternate { display: none; }
}