/* Éclipse — palette and shared proportions. */
:root {
  color-scheme: dark;
  --color-bg: #0B0E17;
  --color-surface: #19202E;
  --color-text: #E9E2D4;
  --color-gold: #C8A96B;
  --color-mist: #819BB0;
  --color-violet: #756B90;
  --font-ui: 'Prompt', 'Segoe UI', sans-serif;
  --font-title: 'Cinzel', 'Palatino Linotype', Georgia, serif;
  --font-editorial: 'Cormorant Garamond', Garamond, Georgia, serif;
  --menu-inset: clamp(3rem, 7.2vw, 10rem);
  --toggle-left: 47.5%;
  --duration: 580ms;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--color-bg); }
body { margin: 0; color: var(--color-text); font-family: var(--font-ui); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 1px solid var(--color-gold); outline-offset: 6px; }
button { touch-action: manipulation; }
[hidden] { display: none !important; }
::selection { background: var(--color-gold); color: var(--color-bg); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* One persistent scene, entirely independent of menu state. */
.portfolio { position: relative; isolation: isolate; min-height: 100svh; overflow: clip; }
.scene { position: absolute; inset: 0; z-index: 0; background: var(--color-bg); animation: scene-arrive 1.1s ease-out both; }
.scene__poster, .scene__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.scene__poster { background: var(--color-bg) url('/media/scene-poster.jpg') center / cover no-repeat; }
.scene__video { opacity: 0; transition: opacity 850ms ease; }
.scene.is-playing .scene__video { opacity: 1; }
.scene__blend { display: none; }

/* The ellipse is a transparent overlay, never a crop of the scene.
   Its edge extends further right at mid-height, creating the broad curved fade. */
.menu-shade {
  position: absolute; z-index: 1; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 80% 105% at -10% 50%,
    #0B0E17 0%, rgba(11, 14, 23, .99) 34%, rgba(11, 14, 23, .94) 47%,
    rgba(11, 14, 23, .76) 59%, rgba(11, 14, 23, .35) 74%,
    rgba(11, 14, 23, .08) 88%, rgba(11, 14, 23, 0) 100%);
  opacity: 1; transition: opacity var(--duration) var(--ease);
}

/* Open, unframed typography with a quiet main-menu rhythm. */
.menu {
  position: relative; z-index: 2; display: flex; flex-direction: column;
  justify-content: center; min-height: 100svh; width: 48%;
  padding: 5.5rem 0 7.5rem var(--menu-inset);
  opacity: 1; visibility: visible; transform: translateX(0);
  transition: transform var(--duration) var(--ease), opacity 450ms ease, visibility var(--duration);
}
.menu__content { width: max-content; max-width: 100%; }
.identity__name { margin: 0; font-family: var(--font-title); font-size: clamp(2.75rem, 4.65vw, 5.25rem); font-weight: 400; line-height: 1.19; letter-spacing: .065em; text-transform: uppercase; }
.identity__name span { display: block; }
.identity { animation: reveal 850ms 100ms var(--ease) both; }
.identity__specialties { margin: 1.5rem 0 0 .2rem; color: var(--color-gold); font-size: clamp(.58rem, .77vw, .77rem); font-weight: 300; line-height: 1.8; letter-spacing: .23em; white-space: nowrap; animation: reveal 850ms 230ms var(--ease) both; }
.identity__specialties span { display: inline-block; padding: 0 .55em; }
.ornament { display: flex; align-items: center; gap: .7rem; width: 7.5rem; margin: 2.65rem 0 2.25rem .2rem; color: var(--color-gold); opacity: .6; animation: reveal 850ms 320ms var(--ease) both; }
.ornament span { height: 1px; flex: 1; background: currentColor; }
.ornament i { display: block; width: 5px; height: 5px; transform: rotate(45deg); border: 1px solid currentColor; }
.ornament span:last-child { background: linear-gradient(to right, currentColor, transparent); }
.navigation__list { display: grid; gap: .8rem; list-style: none; margin: 0; padding: 0; }
.navigation__item { position: relative; width: max-content; min-height: 46px; display: flex; align-items: center; padding: .45rem 1.75rem .45rem .2rem; cursor: default; animation: reveal 850ms var(--ease) both; }
.navigation__item:nth-child(1) { animation-delay: 380ms; }
.navigation__item:nth-child(2) { animation-delay: 460ms; }
.navigation__item:nth-child(3) { animation-delay: 540ms; }
.navigation__label { display: inline-block; color: var(--color-text); font-size: clamp(1.03rem, 1.28vw, 1.35rem); font-weight: 300; letter-spacing: .055em; transition: transform 420ms var(--ease), color 420ms ease; }
.navigation__mark { position: absolute; left: -1.25rem; width: 6px; height: 6px; border: 1px solid var(--color-gold); transform: translateX(-5px) rotate(45deg); opacity: 0; transition: opacity 420ms ease, transform 420ms var(--ease); }
@media (hover: hover) {
  .navigation__item:hover .navigation__label { color: var(--color-gold); transform: translateX(9px); }
  .navigation__item:hover .navigation__mark { opacity: 1; transform: translateX(4px) rotate(45deg); }
}
.menu__footer { position: absolute; bottom: max(2.75rem, env(safe-area-inset-bottom)); left: var(--menu-inset); display: flex; align-items: center; gap: 1rem; animation: reveal 1s 650ms var(--ease) both; }
.footer__line { width: 26px; height: 1px; background: var(--color-gold); opacity: .55; }
.menu__footer p { margin: 0; color: var(--color-mist); font-family: var(--font-editorial); font-size: .82rem; letter-spacing: .22em; }
.menu__footer p span { margin: 0 .35em; color: var(--color-gold); }

/* The only desktop action: withdraw the interface, leave the scene untouched. */
.menu-toggle {
  position: absolute; z-index: 3; left: var(--toggle-left); top: calc(50% - 25px);
  width: 50px; height: 50px; padding: 13px; border: 0; background: transparent;
  color: var(--color-gold); cursor: pointer;
  transition: left var(--duration) var(--ease), color 300ms ease;
}
.menu-toggle__halo { position: absolute; inset: 0; border: 1px solid rgba(200, 169, 107, .2); border-radius: 50%; opacity: 0; transition: opacity 350ms ease, background 350ms ease; }
.menu-toggle svg { position: relative; width: 100%; height: 100%; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; animation: arrow-drift 4.5s ease-in-out infinite; }
.menu-toggle:hover, .menu-toggle:focus-visible { color: var(--color-text); }
.menu-toggle:hover .menu-toggle__halo, .menu-toggle:focus-visible .menu-toggle__halo { opacity: 1; background: rgba(11, 14, 23, .35); }
.portfolio.is-menu-closed .menu { transform: translateX(-2.5rem); opacity: 0; visibility: hidden; pointer-events: none; }
.portfolio.is-menu-closed .menu-shade { opacity: 0; }
.portfolio.is-menu-closed .menu-toggle { left: max(1.25rem, env(safe-area-inset-left)); }
.portfolio.is-menu-closed .menu-toggle svg { rotate: 180deg; }

/* Video controls are deliberately small and only appear when useful. */
.icon-button { display: grid; place-items: center; width: 44px; height: 44px; padding: 11px; border: 1px solid rgba(233, 226, 212, .25); border-radius: 50%; background: rgba(11, 14, 23, .65); color: var(--color-text); cursor: pointer; transition: color 250ms, border-color 250ms; }
.icon-button:hover { color: var(--color-gold); border-color: var(--color-gold); }
.icon-button svg, .scene__play svg { width: 100%; height: 100%; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.scene__fullscreen, .scene__exit { position: absolute; top: max(1rem, env(safe-area-inset-top)); right: max(1rem, env(safe-area-inset-right)); z-index: 4; }
.scene__fullscreen { display: none; }
.scene__play { position: absolute; z-index: 4; bottom: max(1.75rem, env(safe-area-inset-bottom)); right: max(2rem, env(safe-area-inset-right)); display: flex; align-items: center; gap: .65rem; min-height: 44px; padding: .65rem 1rem; border: 1px solid rgba(200, 169, 107, .35); background: rgba(11, 14, 23, .8); color: var(--color-text); font-size: .7rem; font-weight: 300; letter-spacing: .06em; cursor: pointer; }
.scene__play svg { width: 17px; height: 17px; }
.scene__play:hover { border-color: var(--color-gold); color: var(--color-gold); }
.scene:is(:fullscreen, :-webkit-full-screen) { position: fixed; width: 100%; height: 100%; animation: none; background: var(--color-bg); }
.scene:is(:fullscreen, :-webkit-full-screen) .scene__video { object-fit: contain; }
.scene:is(:fullscreen, :-webkit-full-screen) .scene__poster { background-size: contain; }
.scene:is(:fullscreen, :-webkit-full-screen) .scene__blend { display: none; }

@keyframes reveal { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
@keyframes scene-arrive { from { opacity: 0; } to { opacity: 1; } }
@keyframes arrow-drift { 0%, 100% { transform: translateX(0); opacity: .65; } 50% { transform: translateX(-4px); opacity: 1; } }

/* Short laptops: preserve the visual hierarchy without vertical clipping. */
@media (min-width: 901px) and (max-height: 700px) {
  .menu { padding-top: 2.5rem; padding-bottom: 5rem; }
  .identity__name { font-size: clamp(2.65rem, 4.3vw, 4rem); }
  .identity__specialties { margin-top: 1rem; }
  .ornament { margin-top: 1.75rem; margin-bottom: 1.25rem; }
  .navigation__list { gap: .25rem; }
  .menu__footer { bottom: 1.5rem; }
}

/* Tablets and phones use the original 16:9 scene above the menu.
   Coarse landscape phones stay in this layout, rather than becoming desktop. */
@media (max-width: 900px), (hover: none) and (max-height: 600px) {
  :root { --menu-inset: clamp(1.75rem, 8vw, 4.5rem); }
  .portfolio { display: flex; flex-direction: column; min-height: 100svh; }
  .scene { position: relative; flex: none; width: 100%; aspect-ratio: 16 / 9; }
  .scene__poster { background-size: contain; }
  .scene__video { object-fit: contain; }
  .scene__blend { display: block; position: absolute; pointer-events: none; inset: auto 0 -1px; height: 30px; background: linear-gradient(transparent, var(--color-bg)); }
  .menu-shade { display: none; }
  .menu, .portfolio.is-menu-closed .menu { flex: 1; justify-content: flex-start; min-height: 0; width: 100%; padding: 2.5rem var(--menu-inset) 0; transform: none; opacity: 1; visibility: visible; pointer-events: auto; }
  .menu__content { width: 100%; }
  .identity__name { font-size: clamp(2.3rem, 6.2vw, 4.5rem); line-height: 1.17; letter-spacing: .055em; }
  .identity__specialties { font-size: clamp(.55rem, 1.6vw, .76rem); letter-spacing: .17em; margin-top: 1.15rem; }
  .identity__specialties span { padding: 0 .3em; }
  .ornament { margin-top: 1.8rem; margin-bottom: 1.25rem; width: 6rem; }
  .navigation__list { gap: .35rem; }
  .navigation__item { min-height: 48px; }
  .navigation__label { font-size: 1.06rem; }
  .menu__footer { position: static; margin-top: auto; padding: 2.75rem 0 max(1.75rem, env(safe-area-inset-bottom)); }
  .menu-toggle { display: none; }
  .scene__fullscreen { display: grid; }
  .scene__play { bottom: 1.75rem; right: 1rem; }
}

@media (max-width: 360px) {
  .identity__name { font-size: 2.1rem; }
  .identity__specialties { font-size: .51rem; letter-spacing: .13em; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}