/* =========================================================
   Ondřej Hladík — Portfolio
   Dark editorial edition (inspired by dragonfly.xyz)
   ========================================================= */

/* ---------- Fonts (self-hosted, variable Space Grotesk 300-700) ---------- */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/space-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/space-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root {
  --bg:        #F4F1EA;   /* warm white (brand cream) */
  --bg-2:      #E8E3D8;   /* deeper paper for card media */
  --panel:     #EDE8DE;
  --fg:        #17140E;   /* near-black ink */
  --fg-dim:    #6B665C;
  --fg-faint:  #A29D91;
  --serif-fg:  #48443B;
  --line:      rgba(23, 20, 14, 0.16);
  --line-soft: rgba(23, 20, 14, 0.08);

  --violet:    #5227FF;   /* electric violet accent */
  --violet-lift:#6A44FF;
  --coral:     #FF5436;   /* brand accent */
  --on-accent: #FFFFFF;

  --font-sans:  'Space Grotesk', 'Segoe UI', sans-serif;
  --font-serif: Georgia, 'Times New Roman', serif;
  --font-mono:  var(--font-sans);   /* labels unified to grotesk */

  --step--2: clamp(0.68rem, 0.66rem + 0.1vw, 0.74rem);
  --step--1: clamp(0.78rem, 0.74rem + 0.2vw, 0.86rem);
  --step-0:  clamp(0.95rem, 0.9rem + 0.25vw, 1.06rem);
  --step-1:  clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  --step-2:  clamp(1.5rem, 1.2rem + 1.4vw, 2.3rem);
  --step-3:  clamp(2rem, 1.4rem + 3vw, 3.6rem);
  --step-4:  clamp(2.8rem, 1.6rem + 6vw, 6.5rem);
  --step-5:  clamp(3.2rem, 1.2rem + 10vw, 11rem);

  --pad: clamp(1.1rem, 4vw, 4rem);
  --maxw: 1600px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg); color: var(--fg);
  font-family: var(--font-sans); font-size: var(--step-0); line-height: 1.55;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
em { font-style: italic; }
::selection { background: var(--coral); color: #fff; }

.mono { font-family: var(--font-sans); font-weight: 500; font-size: var(--step--1); letter-spacing: .06em; }

/* ---------- Grain ---------- */
.grain {
  position: fixed; inset: 0; z-index: 9000; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply; opacity: 0.035;
}

/* ---------- Scroll progress ---------- */
.progress { position: fixed; top: 0; left: 0; height: 2px; width: 0%; z-index: 9700; background: var(--coral); transition: width .1s linear; }

/* ---------- Mail beetle (points its head at the e-mail) ---------- */
.mailbug { position: fixed; top: 0; left: 0; z-index: 45; width: auto; height: 77px; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) rotate(0deg); transition: opacity .35s var(--ease), transform .2s var(--ease); will-change: left, top, transform; }
.mailbug.is-on { opacity: .95; }
@media (hover: none), (pointer: coarse) { .mailbug { display: none !important; } }

/* ---------- Intro ---------- */
.intro { position: fixed; inset: 0; z-index: 9800; background: var(--bg); display: grid; place-items: center; transition: transform .9s var(--ease) .1s; }
.intro.is-done { transform: translateY(-101%); }
.oh-loader { width: clamp(120px, 22vw, 220px); height: auto; color: var(--fg); overflow: visible; display: block; opacity: 0; }
.oh-loader .mark > text { transform-box: view-box; transform-origin: 0 0; will-change: transform; }
/* static state = finished logo (no-JS / reduced-motion) */
.oh-loader .gl-o { transform: translate(0px, 408.77px) scale(2.11, 1); }
.oh-loader .gl-h { transform: translate(14.72px, 333.35px) scale(1, 1); }
html.no-js .oh-loader { opacity: 1; }
html.no-js .intro { display: none; }

/* =========================================================
   NAV
   ========================================================= */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; transition: transform .4s var(--ease); }
.nav__inner { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1.5rem; padding: clamp(.9rem, 1.8vw, 1.3rem) var(--pad); }
.nav.is-hidden { transform: translateY(-105%); }

.nav__logo { display: inline-flex; align-items: center; gap: .7rem; justify-self: start; }
.nav__logo-mark { height: 40px; width: auto; color: var(--coral); fill: currentColor; }

.nav__burger { display: flex; width: 40px; height: 40px; flex-direction: column; gap: 6px; align-items: center; justify-content: center; justify-self: end; }
.nav__burger span { display: block; width: 22px; height: 1.5px; background: var(--coral); transition: transform .35s var(--ease); }
body.menu-open .nav__burger span:nth-child(1) { transform: translateY(3.75px) rotate(45deg); }
body.menu-open .nav__burger span:nth-child(2) { transform: translateY(-3.75px) rotate(-45deg); }

/* mobile menu */
.menu { position: fixed; inset: 0; z-index: 999; background: var(--bg); padding: clamp(6rem,18vw,9rem) var(--pad) var(--pad); display: flex; flex-direction: column; justify-content: space-between; clip-path: inset(0 0 100% 0); transition: clip-path .6s var(--ease); pointer-events: none; }
body.menu-open .menu { clip-path: inset(0 0 0 0); pointer-events: auto; }
.menu__links { display: flex; flex-direction: column; gap: .3rem; }
.menu__links a { font-family: var(--font-sans); font-weight: 600; font-size: clamp(2.2rem, 12vw, 3.6rem); letter-spacing: -.02em; text-transform: uppercase; display: flex; align-items: baseline; gap: 1rem; transition: color .25s, transform .35s var(--ease); }
.menu__links a i { font-family: var(--font-mono); font-size: .9rem; color: var(--violet); font-style: normal; }
.menu__links a:hover { color: var(--coral); transform: translateX(12px); }

/* =========================================================
   HOME — blank page, just PROJECTS + the list (same look as the contact block)
   ========================================================= */
body.is-home { min-height: 100svh; display: flex; flex-direction: column; }
/* everything flush left on the page's left margin — the same vertical line as the nav logo and
   the footer logo: PROJECTS + list, GET IN TOUCH + e-mail */
body.is-home main { flex: 1; max-width: var(--maxw); width: 100%; margin: 0 auto; padding: 0 var(--pad); text-align: left; }
body.is-home .contact__body { text-align: left; padding-left: 0; padding-right: 0; margin: 0; max-width: none; }
/* PROJECTS sits centred in the first screen, GET IN TOUCH follows below it as on the work page */
.home { min-height: 74svh; display: grid; align-items: center; justify-items: start; }
.home__body { padding: clamp(6rem,14vh,9rem) 0 clamp(2rem,5vw,4rem); }
/* Georgia Italic, lowercase — the same face as the "oh" logo */
.home__title { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: var(--step-4); letter-spacing: -.01em; text-transform: lowercase; line-height: 1; }
.plist { list-style: none; margin-top: clamp(1.6rem,4vw,2.6rem); display: flex; flex-direction: column; align-items: flex-start; gap: .25em; }
/* .plist__link shares the e-mail link's declarations below (.contact__mail) — same size, same hover */
.plist__link { text-transform: lowercase; padding: .14em .2em; background: var(--coral); color: var(--on-accent); transition: transform .35s var(--ease); }
.plist__link:hover { transform: translateX(12px); }   /* slides right on hover (the e-mail keeps its magnetic pull) */

/* =========================================================
   CONTACT
   ========================================================= */
.contact__body { max-width: var(--maxw); margin: 0 auto; padding: clamp(5rem,11vw,9rem) var(--pad) clamp(4rem,9vw,8rem); text-align: center; }
.contact__title { font-family: var(--font-sans); font-weight: 600; font-size: var(--step-4); letter-spacing: -.03em; text-transform: uppercase; line-height: .92; }
.contact__mail, .plist__link { display: inline-block; font-family: var(--font-sans); font-weight: 500; font-size: clamp(1.1rem,3vw,1.9rem); letter-spacing: -.01em; }
/* hairline underline that draws in from the left on hover — project names, e-mail, pinned web link */
.contact__mail, .plist__link, .pmodal__web { position: relative; }
.contact__mail::after, .plist__link::after, .pmodal__web::after { content: ""; position: absolute; left: 0; right: 0; bottom: .08em; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.contact__mail:hover::after, .plist__link:hover::after, .pmodal__web:hover::after { transform: scaleX(1); }
/* the hairline sits on the coral, so keep it off the box edge */
.plist__link::after { left: .2em; right: .2em; bottom: .12em; }
.contact__mail { margin-top: clamp(1.6rem,4vw,2.6rem); }
.contact__socials { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1.2rem,4vw,3rem); margin-top: clamp(2rem,4vw,3rem); color: var(--fg-dim); }
.contact__socials a { transition: color .3s; }
.contact__socials a:hover { color: var(--coral); }

/* =========================================================
   TEAM — lives in its own overlay, opened from the menu
   ========================================================= */
/* the heading shares the grid's container, so TEAM lines up with the first photo,
   and starts at the same height as the close button */
[data-tmodal] .pmodal__scroll { padding-top: clamp(1rem,2.4vw,1.9rem); }
[data-tmodal] .pmodal__head { max-width: var(--maxw); padding-left: 0; }
.team__grid { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: clamp(2rem,4vw,3.4rem) clamp(1.4rem,3vw,2.6rem); }
.team__member { display: flex; flex-direction: column; align-items: flex-start; text-transform: lowercase; }
.team__photo { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border: 1px solid var(--line); margin-bottom: clamp(.9rem,2vw,1.3rem); }
.team__role { font-family: var(--font-sans); font-weight: 600; font-size: var(--step--1); letter-spacing: .01em; color: var(--fg); }
.team__name { margin-top: .5rem; font-family: var(--font-sans); font-weight: 500; font-size: var(--step--1); letter-spacing: .04em; color: var(--fg-dim); }
.team__contact { display: flex; flex-direction: column; gap: .3rem; margin-top: .35rem; }
.team__contact a { font-family: var(--font-sans); font-weight: 500; font-size: var(--step--1); letter-spacing: .04em; color: var(--fg-dim); transition: color .3s; word-break: break-word; }
.team__contact a:hover { color: var(--coral); }

/* =========================================================
   FOOTER
   ========================================================= */
.footer__grid { max-width: var(--maxw); margin: 0 auto; padding: clamp(2rem,4vw,3rem) var(--pad); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.footer__brand { display: flex; align-items: center; gap: .8rem; color: var(--coral); }
.footer__logo { height: clamp(46px,5vw,64px); width: auto; color: var(--coral); fill: currentColor; }
.footer__socials { display: flex; flex-wrap: wrap; gap: clamp(1.2rem,3vw,2.4rem); color: var(--coral); font-family: var(--font-sans); font-weight: 600; font-size: var(--step-0); letter-spacing: .01em; text-transform: lowercase; }
.footer__socials a { transition: color .3s; }
.footer__socials a:hover { color: var(--fg); }

/* =========================================================
   PROJECT DETAIL — full-screen overlay (opens on card click)
   ========================================================= */
body.pmodal-open { overflow: hidden; }
.pmodal { position: fixed; inset: 0; z-index: 9600; background: var(--bg); opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .5s var(--ease), transform .5s var(--ease), visibility 0s .5s; }
.pmodal.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .5s var(--ease), transform .5s var(--ease); }
.pmodal__scroll { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; padding: clamp(4rem,8vw,6.5rem) clamp(1.4rem,7vw,7rem) clamp(4rem,9vw,7rem); -webkit-overflow-scrolling: touch; }

.pmodal__close { position: absolute; top: clamp(1rem,2.4vw,1.9rem); right: clamp(1rem,3vw,2.4rem); z-index: 3; width: 48px; height: 48px; display: grid; place-items: center; font-size: 1.6rem; line-height: 1; color: var(--fg); border-radius: 50%; transition: transform .35s var(--ease), color .3s; }
.pmodal__close:hover { color: var(--coral); transform: rotate(90deg); }

.pmodal__back { position: absolute; left: clamp(.5rem,1.4vw,1.4rem); top: 50%; z-index: 3; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl; font-family: var(--font-sans); font-weight: 600; font-size: var(--step-0); letter-spacing: .01em; text-transform: lowercase; color: var(--fg); transition: color .3s var(--ease); }
.pmodal__back:hover { color: var(--coral); }

.pmodal__head { text-align: left; max-width: 44rem; margin: 0 auto clamp(2rem,5vw,3.2rem); padding-left: clamp(.75rem,2.5vw,2rem); }
.pmodal__title { font-family: var(--font-sans); font-weight: 600; font-size: clamp(2.2rem, 12vw, 3.6rem); line-height: 1; letter-spacing: -.02em; text-transform: uppercase; }

.pmodal__intro { max-width: 44rem; margin: 0 auto clamp(2.6rem,6vw,4.5rem); padding-left: clamp(.75rem,2.5vw,2rem); text-align: left; }
.pmodal__intro p { font-family: var(--font-serif); font-size: var(--step-1); line-height: 1.6; color: var(--serif-fg); }
.pmodal__intro p + p { margin-top: 1.1rem; }

.pmodal__gallery { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem,2.4vw,2rem); }
.pmodal__shot { aspect-ratio: 4 / 3; border: 1px solid var(--line); overflow: hidden; }
.pmodal__shot.is-wide { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
/* real media tiles — half = uniform 4/3 box (cover), wide = full-width natural height; sharp corners */
.pmodal__shot.has-media { border: 0; background: var(--bg-2); }
.pmodal__shot.has-media:not(.is-wide) { aspect-ratio: 4 / 3; }
.pmodal__shot.has-media.is-wide { aspect-ratio: auto; }
.pmodal__shot.has-media img, .pmodal__shot.has-media video { display: block; width: 100%; }
.pmodal__shot.has-media:not(.is-wide) img, .pmodal__shot.has-media:not(.is-wide) video { height: 100%; object-fit: cover; }
.pmodal__shot.has-media.is-square { aspect-ratio: 1; }   /* square artwork keeps its own frame */
.pmodal__shot.has-media.is-wide img, .pmodal__shot.has-media.is-wide video { height: auto; }

@media (max-width: 600px) {
  .pmodal__back { display: none; }
  .pmodal__gallery { grid-template-columns: 1fr; }
  .pmodal__shot.is-wide:not(.has-media) { aspect-ratio: 4 / 3; }
}

/* Show credits — collapsible under the gallery */
.pmodal__credits { max-width: var(--maxw); margin: clamp(2.4rem,5vw,4rem) auto 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: clamp(1rem,3vw,2rem); }
.credits { display: inline-block; text-align: left; }
.credits > summary { display: inline-block; cursor: pointer; list-style: none; font-family: var(--font-sans); font-weight: 600; font-size: var(--step-0); letter-spacing: .01em; text-transform: lowercase; color: var(--fg); padding: .5rem 0; transition: color .3s; }
.credits > summary::-webkit-details-marker { display: none; }
.credits > summary:hover, .credits[open] > summary { color: var(--coral); }
.credits__list { list-style: none; display: flex; flex-direction: column; align-items: flex-start; width: 0; margin-top: 1.1rem; gap: .5rem; }
.credits__list li { font-family: var(--font-sans); font-size: var(--step--1); letter-spacing: .04em; text-transform: lowercase; color: var(--fg); white-space: nowrap; }
.pmodal__web { margin-left: auto; font-family: var(--font-sans); font-weight: 600; font-size: var(--step-0); letter-spacing: .01em; text-transform: lowercase; color: var(--fg); transition: color .3s; }
.pmodal__web:hover { color: var(--coral); }

/* gradient fallbacks for a project that has no images yet (see PROJECTS in main.js) */
.art--1 { background: radial-gradient(120% 120% at 20% 10%, #FF8A5B 0%, #FF5436 38%, #7A1E0C 100%); }
.art--3 { background: linear-gradient(160deg, #0E0E10 0%, #2A2550 60%, #5227FF 120%); }
.art--6 { background: conic-gradient(from 210deg at 50% 50%, #5227FF, #FF5436, #6A44FF, #FF6FB5, #5227FF); }

/* =========================================================
   HELPERS + REVEAL
   ========================================================= */
[data-magnetic] { transition: translate .3s var(--ease); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }

/* =========================================================
   TITLE REVEAL — mask slide-up per word (program.studio style)
   ========================================================= */
.wmask { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .06em; margin-bottom: -.06em; }
.win { display: inline-block; transform: translateY(110%); transition: transform 1s var(--ease-out); will-change: transform; }
.is-revealed .win { transform: translateY(0); }

/* =========================================================
   PROJECTS — mangoshake-style grid
   ========================================================= */
.projects { max-width: var(--maxw); margin: 0 auto; padding: clamp(5.5rem,9vh,7rem) var(--pad) clamp(4rem,8vw,7rem); }
.projects__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem,5vw,5rem) clamp(1.5rem,3vw,3rem); }
.pcard { grid-column: span 1; }
.pcard--wide { grid-column: 1 / -1; }
.pcard__link { display: block; }
.pcard__media { position: relative; aspect-ratio: 4 / 3; background: var(--bg-2); border: 1px solid var(--line); overflow: hidden; display: grid; place-items: center; transition: border-color .4s; }
.pcard--wide .pcard__media { aspect-ratio: 16 / 9; }
/* banner card — media keeps the proportions of the artwork itself */
.pcard--banner .pcard__media { aspect-ratio: 1800 / 462; background: #fff; }
.pcard__beetle { width: 30%; height: auto; filter: invert(1); opacity: .9; transition: transform .8s var(--ease); }
.pcard--wide .pcard__beetle { width: 17%; }
/* picture/img are pinned to the media box so `object-fit: cover` always gets a definite height
   (a plain height:100% chain does not resolve inside <picture> and the image overflowed) */
.pcard__media > picture { position: absolute; inset: 0; display: block; }
.pcard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.pcard__link:hover .pcard__media { border-color: var(--fg-dim); }
.pcard__link:hover .pcard__beetle, .pcard__link:hover .pcard__img { transform: scale(1.05); }
.pcard__meta { margin-top: 1.1rem; }
.pcard__title { display: block; text-align: left; font-family: var(--font-sans); font-weight: 600; text-transform: uppercase; font-size: var(--step-2); letter-spacing: -.01em; line-height: 1; }

@media (max-width: 720px) {
  .projects__grid { grid-template-columns: 1fr; }
  .pcard, .pcard--wide { grid-column: 1 / -1; }
  .pcard__media, .pcard--wide .pcard__media { aspect-ratio: 4 / 3; }
  .pcard--banner .pcard__media { aspect-ratio: 1800 / 462; }
  .pcard__beetle, .pcard--wide .pcard__beetle { width: 30%; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 540px) {
  .footer__grid { flex-direction: column; text-align: center; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  .win { transform: none !important; }
  .intro { display: none; }
}