/* ============================================================
   Massimiliano Cecchini — portfolio
   Shared stylesheet for all pages.
   Values measured from the 1440px Figma exports (27 Jul 2026).
   ============================================================ */

:root {
  /* Colour */
  --background:   #205072;
  --text-primary: #F4F4F4;
  --text-white:   #FFFFFF;  /* italic captions render pure white in the design */
  --text-muted:   #A9C4D4;
  --accent:       #7BE495;

  /* Type */
  --nav:        20px;
  --h1:         80px;
  --h1-lh:      1.0;
  --subline:    24px;
  --subline-lh: 28px;
  --h2:         36px;
  --about-h1:   32px;
  --case-h1:    22px;
  --body:       16px;
  --body-lh:    21px;
  --about-body: 20px;
  --about-lh:   26px;
  --footer-lk:  18px;
  --card-label: 13px;

  /* Layout */
  --gutter:     120px;
  --content:    1200px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--background);
  color: var(--text-primary);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: var(--body);
  line-height: var(--body-lh);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap {
  max-width: var(--content);
  margin-inline: auto;
  padding-inline: clamp(24px, 8.33vw, var(--gutter));
  box-sizing: content-box;
}

/* ---------- Nav (every page) ---------- */

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 46px 52px;
}
.nav__logo img { height: 34px; width: auto; }
.nav__links {
  display: flex;
  align-items: baseline;
  gap: 34px;
  font-size: var(--nav);
  line-height: 1;
}
.nav__links a { color: var(--text-primary); }
.nav__links a:hover { color: var(--accent); text-decoration: none; }
.nav__lang { color: var(--accent); }          /* inert until the IT version exists */

/* ---------- Showreel (index) ---------- */

.reel {
  position: relative;
  width: 100%;
  aspect-ratio: 1440 / 731;
  overflow: hidden;
  background: var(--background);   /* the bars either side of the 16:9 player */
  cursor: pointer;
  border: 0;
  padding: 0;
  display: block;
}
.reel__poster { width: 100%; height: 100%; object-fit: cover; }
.reel__play {
  position: absolute;
  left: 50%; top: 50%;
  translate: -50% -50%;
  width: 84px; height: 84px;
  border-radius: 50%;
  border: 2px solid var(--text-primary);
  background: rgba(32, 80, 114, .25);
  display: grid; place-items: center;
  transition: transform .2s ease, border-color .2s ease;
}
.reel:hover .reel__play { transform: scale(1.08); border-color: var(--accent); }
.reel__play svg { margin-left: 6px; }

/* The player is held at a true 16:9 and centred, so the leftover space either
   side is OUR blue rather than FrameRate's own letterbox colour. */
.reel iframe {
  position: absolute;
  inset: 0;
  margin: auto;
  height: 100%;
  width: auto;
  aspect-ratio: 16 / 9;
  max-width: 100%;
  border: 0;
  display: block;
}

/* ---------- Scroll cue ---------- */

.cue { text-align: center; margin-top: 125px; }
.cue__pill {
  display: inline-block;
  background: var(--accent);
  color: var(--background);
  font-size: var(--body);
  line-height: 20px;
  padding: 6px 40px;
  border-radius: 3px;
}
.cue__arrow { display: block; margin: 6px auto 0; }

/* ---------- Hero statement (index) ---------- */

.hero { text-align: center; }
.hero__cube { margin: 50px auto 0; height: 95px; width: auto; }
.hero h1 {
  margin-top: 52px;
  font-size: var(--h1);
  line-height: var(--h1-lh);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--accent);
}
.hero__sub {
  margin-top: 14px;
  font-size: var(--subline);
  line-height: var(--subline-lh);
  font-style: italic;
  color: var(--text-white);
}

/* ---------- Sections (index) ---------- */

.section { margin-top: 88px; }
.section h2 {
  font-size: var(--h2);
  line-height: 1.1;
  font-weight: 700;
  color: var(--accent);
  text-align: center;
}
.section__sub {
  margin-top: 20px;
  text-align: center;
  font-style: italic;
  color: var(--text-primary);
}

/* ---------- Work grid ---------- */

.work {
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 20px;
  row-gap: 28px;
}
.card { display: block; color: inherit; }
.card:hover { text-decoration: none; }

/* Outer frame keeps the existing gentle lift and clips whatever grows inside it. */
.card__media {
  position: relative;
  overflow: hidden;
  transition: transform .35s ease;
}
.card:hover .card__media { transform: scale(1.015); }

/* Image pushes a further 10% inside that fixed frame. */
.card__thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform .45s ease;
}
.card:hover .card__thumb { transform: scale(1.10); }

.card__overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(32, 80, 114, .70);   /* --background at 70% */
  color: var(--text-primary);
  font-size: var(--h2);
  line-height: 1.2;
  font-weight: 700;
  text-align: center;
  opacity: 0;
  transition: opacity .3s ease;
}
.card:hover .card__overlay { opacity: 1; }

.card__label {
  margin-top: 8px;
  font-size: var(--card-label);
  line-height: 18px;
  color: var(--text-primary);
}
.card__meta { color: var(--text-muted); }

/* ---------- Creation arc ---------- */

/* Coordinate space is the original Figma layout at 1x: 619 x 230.
   Children are placed in % of that, so the composition scales as one piece. */
.arc {
  position: relative;
  width: 619px;
  max-width: 100%;
  aspect-ratio: 619 / 230;
  margin: 52px auto 0;
}
.arc__el { position: absolute; height: auto; }

.arc__sketch { left:  0%;      top: 1.739%; width: 18.740%; }
.arc__wire   { left: 26.333%;  top: 1.522%; width: 18.902%; }
.arc__filled { left: 53.069%;  top: 2.174%; width: 18.417%; }
.arc__video  { left: 76.737%;  top: 1.630%; width: 23.425%; }
.arc__line   { left:  0.485%;  top: 92.391%; width: 96.284%; }
.arc__head   { left: 94.023%;  top: 85.652%; width:  2.908%; }

/* ---- resting state, before the section is reached ---- */
.arc__sketch { clip-path: inset(0 100% 0 0); }
.arc__wire path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.arc__filled,
.arc__video  { opacity: 0; transform: translateY(10px); }
.arc__line path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.arc__head { opacity: 0; transform: scale(.6); transform-origin: left center; }

/* ---- played state ----
   Line draws linearly over 1850ms; cube delays are 500ms apart and timed so
   each one lands as the tip passes beneath it. */
.arc.is-playing .arc__line path {
  transition: stroke-dashoffset 1850ms linear;
  stroke-dashoffset: 0;
}
.arc.is-playing .arc__sketch {
  transition: clip-path 420ms ease-out 171ms;
  clip-path: inset(0 0 0 0);
}
.arc.is-playing .arc__wire path {
  transition: stroke-dashoffset 520ms ease-in-out 678ms;
  stroke-dashoffset: 0;
}
.arc.is-playing .arc__filled {
  transition: opacity 420ms ease-out 1187ms, transform 420ms ease-out 1187ms;
  opacity: 1; transform: translateY(0);
}
.arc.is-playing .arc__video {
  transition: opacity 420ms ease-out 1690ms, transform 420ms ease-out 1690ms;
  opacity: 1; transform: translateY(0);
}
.arc.is-playing .arc__head {
  transition: opacity 220ms ease-out 1850ms, transform 220ms ease-out 1850ms;
  opacity: 1; transform: scale(1);
}

/* Anyone with "reduce motion" on gets the finished frame, no sequence. */
@media (prefers-reduced-motion: reduce) {
  .arc__sketch { clip-path: none; }
  .arc__wire path, .arc__line path { stroke-dashoffset: 0; }
  .arc__filled, .arc__video, .arc__head { opacity: 1; transform: none; }
  .arc__el, .arc__el path { transition: none !important; }
}

/* ---------- Case study pages ---------- */

.case {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 100px;
  align-items: start;
  margin-top: 30px;
}
.case__media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.case__metaline {
  margin-top: 15px;
  font-style: italic;
  color: var(--text-white);
}
.case h1 {
  margin-top: 5px;
  font-size: var(--case-h1);
  line-height: 1.2;
  font-weight: 700;
  color: var(--accent);
}
.case__type { margin-top: 21px; font-weight: 700; }
.case__credit { font-style: italic; }
.case__body p { margin-top: 21px; }
.case__body b { font-weight: 700; }

/* ---------- About page ---------- */

.about {
  display: grid;
  grid-template-columns: 630px 506px;
  gap: 64px;
  align-items: start;
  margin-top: 69px;
}
.about__portrait img { width: 654px; max-width: 100%; margin-inline: auto; }
.about h1 {
  margin-top: 36px;
  font-size: var(--about-h1);
  line-height: 1.2;
  font-weight: 700;
  color: var(--accent);
}
.about__bio { font-size: var(--about-body); line-height: var(--about-lh); }
.about__bio p { margin-top: 26px; }
.about__bio p:first-child { margin-top: 19px; }

/* ---------- Footer (every page) ---------- */

.footer {
  position: relative;
  margin-top: 118px;
  padding-top: 137px;
  background: var(--accent);
  color: var(--background);
  overflow: hidden;
}
.footer__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 29px;
}
.footer__logo { height: 68px; width: auto; }
.footer__links {
  display: flex;
  flex-direction: column;
  font-size: var(--footer-lk);
  line-height: 23px;
}
.footer__links a { color: var(--background); }
.footer__links a:hover { text-decoration: underline; }
/* Cropped to the visible cubes (no transparent margin), so this 60px is a real
   60px of clearance at every window width — it can never collide. */
.footer__cubes {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 60px;
  pointer-events: none;
}

/* ============================================================
   Responsive — no mobile frames exist yet, these are proposals.
   ============================================================ */

@media (max-width: 1100px) {
  :root { --h1: 56px; --subline: 20px; --subline-lh: 26px; --h2: 30px; }
  .case { grid-template-columns: 1fr; gap: 40px; }
  .about { grid-template-columns: 1fr; gap: 40px; }
  .about__portrait img { width: 520px; }
  .footer { padding-top: 96px; }
}

@media (max-width: 720px) {
  :root {
    --nav: 16px; --h1: 34px; --subline: 16px; --subline-lh: 22px;
    --h2: 24px; --about-h1: 24px; --case-h1: 19px;
    --about-body: 17px; --about-lh: 24px; --footer-lk: 16px;
  }
  .nav { padding-block: 24px 28px; flex-wrap: wrap; gap: 12px 20px; }
  .nav__logo img { height: 26px; }
  .nav__links { gap: 18px; width: 100%; justify-content: space-between; }
  .reel { aspect-ratio: 16 / 9; }
  .reel__play { width: 56px; height: 56px; }
  .cue { margin-top: 56px; }
  .cue__pill { padding: 6px 24px; font-size: 14px; }
  .hero__cube { margin-top: 32px; height: 64px; }
  .hero h1 { margin-top: 28px; }
  .hero__sub { margin-top: 20px; }
  .section { margin-top: 56px; }
  .work { grid-template-columns: 1fr; row-gap: 24px; }
  .card__label { font-size: 12px; line-height: 16px; }
  .arc { margin-top: 32px; }
  .case__body p, .about__bio p { margin-top: 18px; }
  .footer { margin-top: 72px; padding-top: 64px; }
  .footer__cubes { margin-top: 40px; }
  .footer__inner { flex-direction: column; align-items: center; gap: 20px; text-align: center; }
  .footer__logo { height: 52px; }
  .footer__links { align-items: center; }
}