/* Shared system for One Point Design website explorations */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=Manrope:wght@200;300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500&family=Syne:wght@500;600;700;800&display=swap');

* { box-sizing: border-box; }

.opd-frame {
  width: 1440px;
  font-family: 'Manrope', system-ui, sans-serif;
  color: #E7DFD2;
  background: #1E2A28;
  overflow: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.opd-frame *::selection { background: #C8A972; color: #1E2A28; }

.opd-serif { font-family: 'Cormorant Garamond', 'Times New Roman', serif; font-weight: 400; letter-spacing: -0.01em; }
.opd-sans  { font-family: 'Manrope', system-ui, sans-serif; }
.opd-mono  { font-family: 'JetBrains Mono', 'Menlo', monospace; }

/* Image placeholder — a tonal architectural plate. Uses CSS for depth, no fake SVG illustration */
.opd-plate {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 30% 20%, rgba(231,223,210,0.10), transparent 60%),
    radial-gradient(80% 60% at 80% 90%, rgba(200,169,114,0.12), transparent 60%),
    linear-gradient(135deg, #232f2d 0%, #15201e 60%, #0d1615 100%);
}
.opd-plate::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(115deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 7px);
  pointer-events: none;
}
.opd-plate::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(110% 70% at 50% 110%, rgba(0,0,0,0.55), transparent 60%);
  pointer-events: none;
}
.opd-plate--light {
  background:
    radial-gradient(120% 80% at 30% 20%, rgba(255,255,255,0.55), transparent 60%),
    radial-gradient(80% 60% at 80% 90%, rgba(200,169,114,0.18), transparent 60%),
    linear-gradient(135deg, #efe9de 0%, #ddd2bf 70%, #c8b89b 100%);
  color: #2B2A28;
}
.opd-plate--light::before {
  background-image:
    repeating-linear-gradient(115deg, rgba(0,0,0,0.04) 0 1px, transparent 1px 8px);
}
.opd-plate--light::after { background: radial-gradient(110% 70% at 50% 110%, rgba(0,0,0,0.15), transparent 60%); }

.opd-plate--warm {
  background:
    radial-gradient(120% 80% at 30% 20%, rgba(255,220,170,0.25), transparent 60%),
    linear-gradient(135deg, #5a3e26 0%, #2a1d12 70%, #160d07 100%);
}
.opd-plate--cool {
  background:
    radial-gradient(120% 80% at 30% 20%, rgba(180,210,210,0.18), transparent 60%),
    linear-gradient(135deg, #1f3a3a 0%, #0e1f1f 70%, #06100f 100%);
}
.opd-plate--ochre {
  background:
    radial-gradient(120% 80% at 30% 20%, rgba(255,220,170,0.4), transparent 60%),
    linear-gradient(135deg, #c8a972 0%, #8a6f3f 70%, #4a3a20 100%);
}

/* Hero entrance animations — keyframes MUST live here, not inline-rendered,
   otherwise React reconciliation on a parent rAF loop resets them every frame. */
@keyframes opd-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
@keyframes opd-rise { from { transform: translateY(48px); opacity: 0; } to { transform: none; opacity: 1; } }
.opd-rise { animation: opd-rise 1.4s cubic-bezier(.2,.6,.2,1) both; }
.opd-bob { animation: opd-bob 1.6s ease-in-out infinite; }

/* Nav state — transparent on the hero, glass dark after scrolling */
.opd-nav[data-scrolled="1"] {
  background: rgba(13, 22, 21, 0.78);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(231,223,210,0.08);
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

.opd-plate__cap {
  position: absolute;
  bottom: 14px; left: 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(231,223,210,0.55);
  z-index: 1;
}

/* Reveal-on-scroll */
.opd-reveal { opacity: 0; transform: translateY(28px); transition: opacity 1.2s cubic-bezier(.2,.6,.2,1), transform 1.2s cubic-bezier(.2,.6,.2,1); }
.opd-reveal.is-in { opacity: 1; transform: none; }
.opd-reveal-img { clip-path: inset(0 0 100% 0); transition: clip-path 1.4s cubic-bezier(.2,.6,.2,1); }
.opd-reveal-img.is-in { clip-path: inset(0 0 0 0); }

/* Hairline */
.opd-hr { height: 1px; background: currentColor; opacity: 0.18; border: 0; }

/* Marquee */
@keyframes opd-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.opd-marquee { display: flex; width: max-content; animation: opd-marquee 60s linear infinite; }
.opd-marquee--slow { animation-duration: 90s; }

/* Subtle film grain for cinematic feel */
.opd-grain::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image:
    radial-gradient(rgba(255,255,255,0.7) 0.5px, transparent 0.5px),
    radial-gradient(rgba(0,0,0,0.7) 0.5px, transparent 0.5px);
  background-size: 3px 3px, 5px 5px;
  background-position: 0 0, 1px 2px;
}

/* Slow pan / ken-burns on hero plate */
@keyframes opd-pan {
  0% { transform: scale(1.08) translate(0%, 0%); }
  100% { transform: scale(1.18) translate(-2%, -2%); }
}
.opd-pan { animation: opd-pan 18s ease-in-out infinite alternate; transform-origin: center; }

/* ════════════════════════════════════════════════════════════════════
   MOBILE / TABLET — responsive overrides. The site is built with inline
   React styles (desktop-first); these !important rules adapt the common
   structural patterns for small screens without touching components.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  /* — Section gutters — */
  .opd-frame section {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
  /* Inner blocks that hard-code wide side padding */
  .opd-frame [style*="0 80px"]    { padding-left: 22px !important; padding-right: 22px !important; }
  .opd-frame [style*="40px 56px"] { padding-left: 22px !important; padding-right: 22px !important; }
  .opd-frame [style*="110px 56px"]{ padding-left: 22px !important; padding-right: 22px !important; }

  /* — Collapse every multi-column grid to one column — */
  .opd-frame [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* — Tame oversized gaps — */
  .opd-frame [style*="gap: 96px"],
  .opd-frame [style*="gap: 90px"],
  .opd-frame [style*="gap: 80px"],
  .opd-frame [style*="gap: 64px"],
  .opd-frame [style*="gap: 56px"] { gap: 32px !important; }

  /* — Navigation: wrap to two rows; pill becomes a horizontal scroller — */
  header.opd-nav {
    flex-wrap: wrap !important;
    padding: 12px 16px !important;
    row-gap: 10px !important;
    align-items: center !important;
  }
  header.opd-nav > nav {
    order: 3 !important;
    width: 100% !important;
    overflow-x: auto !important;
    justify-content: flex-start !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  header.opd-nav > nav::-webkit-scrollbar { display: none; }
  header.opd-nav > nav a { flex: 0 0 auto; }

  /* — Pinned-section bottom strips: pull in side insets, allow wrap — */
  .opd-frame [style*="bottom: 56px"][style*="left: 56px"],
  .opd-frame [style*="bottom: 40px"][style*="left: 56px"] {
    left: 20px !important;
    right: 20px !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    font-size: 10px !important;
  }

  /* — Pinned-section top labels: tighten insets — */
  .opd-frame [style*="top: 80px"][style*="left: 56px"]  { left: 20px !important; }
  .opd-frame [style*="top: 80px"][style*="right: 56px"] { right: 20px !important; font-size: 10px !important; }
  .opd-frame [style*="top: 110px"][style*="right: 56px"]{ right: 20px !important; }

  /* — Hero title block + corner annotation — */
  .opd-frame [style*="left: 56px"][style*="bottom: 80px"] { left: 22px !important; right: 22px !important; }
  .opd-frame [style*="top: 110px"][style*="right: 56px"]  { display: none !important; } /* hide hero corner meta on phones */

  /* — Right-edge progress ticks (pinned chapters): move closer to edge — */
  .opd-frame [style*="right: 56px"][style*="translateY(-50%)"] { right: 14px !important; }

  /* — Founder / centred name blocks: relax fixed heights — */
  .opd-frame [style*="place-items: center"] { padding-left: 20px !important; padding-right: 20px !important; }

  /* — Tighten very large vertical paddings on content sections — */
  .opd-frame section[style*="180px"],
  .opd-frame section[style*="200px"],
  .opd-frame section[style*="160px"] {
    padding-top: 96px !important;
    padding-bottom: 96px !important;
  }

  /* — Newspaper clippings: kill rotation so they don't overflow — */
  .opd-frame .nkm-clipping { transform: none !important; }

  /* — Tables: shrink type so rows don't overflow — */
  .opd-frame [style*="grid-template-columns"] > .opd-serif { font-size: 20px !important; }
}

/* Extra-small phones */
@media (max-width: 480px) {
  .opd-frame section { padding-left: 18px !important; padding-right: 18px !important; }
  .opd-frame [style*="0 80px"] { padding-left: 18px !important; padding-right: 18px !important; }
  header.opd-nav .opd-serif { font-size: 18px !important; }
}