:root { --bg:#0a0705; --bg-2:#14100a; --cream:#f2e9d8; --gold:#d9ab5f; }
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--bg); font-family:'Source Serif 4', serif; color:var(--cream); }

/* ============ GLOBAL NAV (persistent across all sections) ============ */
.site-nav {
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; justify-content:space-between; align-items:center;
  padding:1.5rem 2.4rem;
  background:linear-gradient(to bottom, rgba(10,7,5,0.75) 0%, transparent 100%);
  opacity:0; animation:fadeDown 1.2s ease forwards; animation-delay:.3s;
}
.site-nav .wordmark {
  font-family:'Fraunces',serif; font-size:1.3rem; letter-spacing:.38em; color:var(--cream);
  text-shadow:0 2px 14px rgba(0,0,0,.6); text-decoration:none;
}
.site-nav .links { display:flex; gap:2.2rem; }
.site-nav .links a {
  font-size:.72rem; letter-spacing:.15em; text-transform:uppercase; color:rgba(242,233,216,.75);
  text-decoration:none; transition:color .2s ease;
}
.site-nav .links a:hover { color:var(--gold); }
@keyframes fadeDown { from{opacity:0; transform:translateY(-10px);} to{opacity:1; transform:translateY(0);} }
@media (max-width:640px) {
  .site-nav { padding:1.3rem 1.4rem; }
  .site-nav .wordmark { font-size:.95rem; letter-spacing:.28em; }
  .site-nav .links { gap:1.2rem; }
  .site-nav .links a { font-size:.62rem; }
}

/* ============ HERO ============ */
.hero-stage { position:relative; width:100%; height:100vh; overflow:hidden; }
.sky { position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(120,78,30,0.22), transparent 60%),
    linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 55%, #060403 100%); }
.particles { position:absolute; inset:0; z-index:1; overflow:hidden; }
.particles span { position:absolute; width:2px; height:2px; border-radius:50%; background:var(--gold); opacity:.5; animation:drift linear infinite; }
@keyframes drift { from{transform:translateY(0);} to{transform:translateY(-120vh);} }

.ship-wrap { position:absolute; z-index:5; left:54%; top:2%; width:96vw;
  transform:translateX(-40%) rotate(-3deg) scale(1.04); filter:drop-shadow(0 50px 70px rgba(0,0,0,.65)); }
.ship-wrap img { width:100%; height:auto; display:block;
  -webkit-mask-image:linear-gradient(to bottom, black 0%, black 76%, transparent 97%);
  mask-image:linear-gradient(to bottom, black 0%, black 76%, transparent 97%); }
.lantern { position:absolute; z-index:6; width:1.8%; aspect-ratio:0.6/1;
  transform:translate(-50%,-50%); pointer-events:none; }
.lantern::before { /* dim housing — barely-there silhouette, not a circle */
  content:''; position:absolute; inset:-12%;
  clip-path:polygon(50% 0%, 82% 18%, 88% 82%, 50% 100%, 12% 82%, 18% 18%);
  background:rgba(15,10,6,.62); filter:blur(1.6px); }
.lantern::after { /* warm light escaping the housing — flame-shaped, not a plain dot */
  content:''; position:absolute; inset:-90%;
  border-radius:50% 50% 50% 50% / 65% 65% 35% 35%;
  transform-origin:50% 88%;
  background:
    radial-gradient(circle, rgba(255,170,80,.72) 0%, rgba(255,170,80,0) 24%),
    radial-gradient(circle, rgba(255,100,30,.42) 0%, rgba(210,60,15,.18) 46%, transparent 72%);
  mix-blend-mode:screen; filter:blur(2px);
  animation:flameFlicker 5.2s ease-in-out infinite; }
.lantern-1 { left:42%; top:30%; }
.lantern-2 { left:59%; top:52%; }
.lantern-3 { left:76%; top:55%; }
.lantern-1::after { animation-duration:5.8s; }
.lantern-2::after { animation-duration:4.6s; animation-delay:-1.7s; }
.lantern-3::after { animation-duration:6.4s; animation-delay:-3.2s; }
@keyframes flameFlicker {
  0%   { opacity:.55; transform:scale(0.96) translateX(0) rotate(0deg); }
  18%  { opacity:.66; transform:scale(1.04) translateX(2%) rotate(4deg); }
  34%  { opacity:.5;  transform:scale(0.93) translateX(-1.5%) rotate(-3deg); }
  50%  { opacity:.72; transform:scale(1.06) translateX(1.5%) rotate(3deg); }
  66%  { opacity:.56; transform:scale(0.95) translateX(-2%) rotate(-4deg); }
  82%  { opacity:.64; transform:scale(1.02) translateX(1%) rotate(2deg); }
  100% { opacity:.55; transform:scale(0.96) translateX(0) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) { .lantern::after { animation:none; opacity:.75; } }
.ship-reflection { position:absolute; z-index:3; left:54%; top:46%; width:96vw;
  transform:translateX(-40%) rotate(-3deg) scale(1.04,-1.04); opacity:.16; filter:blur(5px);
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.9) 0%, transparent 65%);
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.9) 0%, transparent 65%); }
.ship-reflection img { width:100%; height:auto; display:block; }

.wave-layer { position:absolute; left:0; right:0; z-index:4; overflow:hidden; }
.wave-layer svg { display:block; width:200%; height:100%; }
.wave-back { bottom:0; height:48vh; z-index:2; opacity:.9; }
.wave-mid { bottom:0; height:38vh; z-index:4; opacity:.94; }
.wave-front { bottom:0; height:28vh; z-index:6; }
.wave-back svg { animation:waveScroll 22s linear infinite; }
.wave-mid svg { animation:waveScrollRev 15s linear infinite; }
.wave-front svg { animation:waveScroll 9s linear infinite; }
@keyframes waveScroll { from{transform:translateX(0);} to{transform:translateX(-50%);} }
@keyframes waveScrollRev { from{transform:translateX(-50%);} to{transform:translateX(0);} }

.veil { position:absolute; inset:0; z-index:8;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%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"),
    linear-gradient(165deg, rgba(6,4,2,.95) 0%, rgba(70,44,20,.72) 45%, rgba(6,4,2,.96) 100%);
  background-blend-mode:overlay, normal; background-size:180px, cover; mix-blend-mode:multiply; opacity:.94;
  -webkit-mask-image:radial-gradient(circle var(--r,17vmin) at var(--mx,50%) var(--my,42%), rgba(0,0,0,.3) 0%, rgba(0,0,0,.7) 42%, black 72%);
  mask-image:radial-gradient(circle var(--r,17vmin) at var(--mx,50%) var(--my,42%), rgba(0,0,0,.3) 0%, rgba(0,0,0,.7) 42%, black 72%); }
.grain-top { position:absolute; inset:0; z-index:9; pointer-events:none; opacity:.12; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n2)'/%3E%3C/svg%3E");
  background-size:140px; }
.glow { position:absolute; inset:0; z-index:10; pointer-events:none;
  background:radial-gradient(circle 300px at var(--mx,50%) var(--my,42%), rgba(255,205,130,.14), transparent 70%); mix-blend-mode:screen; }

.hero-content { position:relative; z-index:11; height:100vh; display:flex; flex-direction:column; pointer-events:none; }
.hero-content .hero-text { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; text-align:center; padding:0 1.5rem 3rem; }
h1 { font-family:'Fraunces',serif; font-style:italic; font-weight:400; font-size:clamp(2rem,4.6vw,3.2rem); color:var(--cream);
  max-width:16ch; text-shadow:0 3px 24px rgba(0,0,0,.75); opacity:0; animation:riseIn 1.2s ease forwards; animation-delay:1.4s; }
h1 em { font-style:normal; color:var(--gold); }
.hero-sub { margin-top:1.2rem; max-width:36ch; font-size:1rem; line-height:1.65; color:rgba(242,233,216,.82); text-shadow:0 2px 16px rgba(0,0,0,.7);
  opacity:0; animation:riseIn 1.2s ease forwards; animation-delay:1.65s; }
@keyframes riseIn { from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:translateY(0);} }

.scroll-cue { position:absolute; bottom:2.4rem; left:50%; transform:translateX(-50%); z-index:12;
  width:1px; height:38px; background:rgba(217,171,95,.28); overflow:hidden;
  opacity:0; animation:riseIn 1s ease forwards; animation-delay:2.4s; }
.scroll-cue::after { content:''; position:absolute; top:-6px; left:50%;
  width:5px; height:5px; margin-left:-2.5px; border-radius:50%; background:var(--gold);
  box-shadow:0 0 6px rgba(217,171,95,.7);
  animation:scrollDrip 2.4s cubic-bezier(.5,0,.5,1) infinite; }
@keyframes scrollDrip {
  0% { transform:translateY(0); opacity:0; }
  15% { opacity:1; }
  85% { opacity:1; }
  100% { transform:translateY(38px); opacity:0; }
}

/* Tablets/phones in portrait: on a tall/narrow viewport there's no room to
   show bow-to-stern and still reach the waves. Instead of shrinking to fit,
   zoom in — bigger width crops the stern off-screen right and fills the
   vertical gap, keeping focus on the bow (the carved eye, the strongest
   part of the shot). top/left are percentages of the element's own box, so
   scaling width up preserves the same relative framing, just bigger. */
@media (orientation:portrait) and (min-width:641px) {
  .ship-wrap { left:60%; top:0%; width:190vw; transform:translateX(-45%) rotate(-3deg) scale(1.05); }
  .ship-reflection { left:60%; top:44%; width:190vw; transform:translateX(-45%) rotate(-3deg) scale(1.05,-1.05); }
  .wave-back { height:44vh; } .wave-mid { height:34vh; } .wave-front { height:25vh; }
}
@media (max-width:640px) {
  .ship-wrap { left:62%; top:-1%; width:230vw; transform:translateX(-48%) rotate(-3deg) scale(1.05); }
  .ship-reflection { left:62%; top:42%; width:230vw; transform:translateX(-48%) rotate(-3deg) scale(1.05,-1.05); }
  .wave-back { height:42vh; } .wave-mid { height:32vh; } .wave-front { height:23vh; }
  .hero-content .hero-text { padding-bottom:2.5rem; }
  h1 { font-size:1.7rem; max-width:14ch; }
  .hero-sub { font-size:.92rem; max-width:30ch; }
}
@media (max-width:390px) {
  .ship-wrap, .ship-reflection { width:260vw; }
  h1 { font-size:1.5rem; }
}

/* ============ SHARED: secondary sections (Approach / About / Contact) ============ */
section.block {
  position:relative; padding:7rem 1.5rem 8rem;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  overflow:hidden;
  border-top:1px solid rgba(217,171,95,.15);
}
.eyebrow { font-size:.66rem; letter-spacing:.4em; text-transform:uppercase; color:var(--gold);
  margin-bottom:1.3rem; opacity:0; transform:translateY(14px); transition:opacity .9s ease, transform .9s ease; transition-delay:.15s; }
h2 { font-family:'Fraunces',serif; font-style:italic; font-weight:400; font-size:clamp(1.9rem,4vw,2.9rem);
  max-width:18ch; line-height:1.28; opacity:0; transform:translateY(14px) scale(.98);
  clip-path:inset(0 100% 0 0);
  transition:opacity 1s ease, transform 1s ease, clip-path 1.3s cubic-bezier(.65,0,.35,1); transition-delay:.3s; }
h2 em { font-style:normal; color:var(--gold); }
.block-body { max-width:58ch; margin-top:1.6rem; font-size:1.06rem; line-height:1.75; color:rgba(242,233,216,.82);
  opacity:0; transform:translateY(18px); transition:opacity 1s ease, transform 1s ease; transition-delay:.55s; }
section.block.is-visible h2 { opacity:1; clip-path:inset(0 0% 0 0); transform:translateY(0) scale(1); }
section.block.is-visible .eyebrow,
section.block.is-visible .block-body { opacity:1; transform:translateY(0); }

/* ---- Approach specific: coolest, most serious ---- */
#approach { background:radial-gradient(ellipse at 50% 0%, rgba(120,78,30,.11), transparent 55%), linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%); }
.route { width:min(420px,70vw); height:40px; margin-bottom:2.2rem; }
.route path { fill:none; stroke:var(--gold); stroke-width:1.4; stroke-linecap:round; stroke-dasharray:500; stroke-dashoffset:500; transition:stroke-dashoffset 1.8s cubic-bezier(.65,0,.35,1); }
#approach.is-visible .route path { stroke-dashoffset:0; }
.principles { margin-top:3.6rem; display:grid; grid-template-columns:repeat(3,1fr); gap:2.5rem; max-width:900px; width:100%; }
.principle { opacity:0; transform:translateY(20px) scale(.96); transition:opacity .9s ease, transform .9s cubic-bezier(.34,1.4,.64,1); text-align:left; padding-top:1.4rem; border-top:1px solid rgba(217,171,95,.25); }
.principle .num { display:block; font-family:'Fraunces',serif; font-style:italic; color:var(--gold); font-size:.9rem; margin-bottom:.7rem; }
.principle p { font-size:.92rem; line-height:1.6; color:rgba(242,233,216,.75); }
#approach.is-visible .principle { opacity:1; transform:translateY(0) scale(1); }
#approach.is-visible .principle:nth-child(1) { transition-delay:.6s; }
#approach.is-visible .principle:nth-child(2) { transition-delay:.75s; }
#approach.is-visible .principle:nth-child(3) { transition-delay:.9s; }
@media (max-width:720px) { .principles { grid-template-columns:1fr; gap:1.8rem; max-width:420px; } }

.block-closing { margin-top:3rem; max-width:44ch; font-family:'Fraunces',serif; font-style:italic; font-size:1.02rem;
  line-height:1.6; color:rgba(217,171,95,.75);
  opacity:0; transform:translateY(14px); transition:opacity .9s ease, transform .9s ease; transition-delay:1.05s; }
#approach.is-visible .block-closing { opacity:1; transform:translateY(0); }

/* ---- About specific: warmer, faint ship watermark ---- */
#about {
  background:radial-gradient(ellipse at 50% 50%, rgba(140,90,35,.16), transparent 65%), linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}
.about-watermark {
  position:absolute; top:50%; left:50%; width:min(900px, 140vw); aspect-ratio:729/492;
  transform:translate(-50%,-50%) scale(1.06); z-index:0; pointer-events:none;
  background-color:var(--gold);
  -webkit-mask-image:url('../assets/images/gaulos-icon.svg');
  mask-image:url('../assets/images/gaulos-icon.svg');
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-position:center; mask-position:center;
  opacity:0; filter:blur(14px);
  transition:opacity 2.2s ease, filter 2.2s ease, transform 2.2s ease; transition-delay:.2s;
}
#about.is-visible .about-watermark { opacity:.05; filter:blur(0); transform:translate(-50%,-50%) scale(1); }
#about .eyebrow, #about h2, #about .block-body { position:relative; z-index:1; }

/* ---- Contact specific: warmest, most inviting ---- */
#contact { background:radial-gradient(ellipse at 50% 100%, rgba(120,78,30,.22), transparent 60%), linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%); padding-bottom:5rem; }
.mail-link { margin-top:2.6rem; font-family:'Fraunces',serif; font-size:clamp(1.3rem,3vw,1.9rem); color:var(--cream);
  text-decoration:none; position:relative; display:inline-block; padding-bottom:.4rem;
  opacity:0; transform:translateY(18px); transition:opacity 1s ease, transform 1s ease; transition-delay:.35s; }
.mail-link::after { content:''; position:absolute; left:0; bottom:0; height:1px; width:100%; background:var(--gold);
  transform:scaleX(0); transform-origin:left; transition:transform 1.1s cubic-bezier(.65,0,.35,1); transition-delay:.9s; }
#contact.is-visible .mail-link::after { transform:scaleX(1); }
#contact.is-visible .mail-link { opacity:1; transform:translateY(0); }
.mail-link:hover { color:var(--gold); }
.meta { margin-top:2.4rem; font-size:.82rem; letter-spacing:.05em; color:rgba(242,233,216,.55);
  opacity:0; transform:translateY(14px); transition:opacity 1s ease, transform 1s ease; transition-delay:.5s; }
#contact.is-visible .meta { opacity:1; transform:translateY(0); }

/* Soft fade at the top edge of each section for a gentler transition */
section.block::before {
  content:''; position:absolute; top:0; left:0; right:0; height:4rem;
  background:linear-gradient(to bottom, rgba(0,0,0,.35), transparent);
  pointer-events:none; z-index:1;
}

/* ============ FOOTER ============ */
.site-footer { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:.5rem 1.6rem; padding:1.6rem 2.4rem;
  border-top:1px solid rgba(217,171,95,.15); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(217,171,95,.78); background:var(--bg-2); }
.site-footer a { color:var(--gold); text-decoration:none; }
@media (max-width:640px) { .site-footer { flex-direction:column; gap:.6rem; text-align:center; padding:1.4rem 1.4rem; } }