/* anthonyfossey.com — home page.
   Shared by index.html (local preview) and the WordPress child theme, so this
   file is the single source of truth for the page's styling.
   Image paths are relative to this file, i.e. assets/. */

*{box-sizing:border-box}

body{
  margin:0;
  background:#000;
  font-family:Poppins,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* Holds the SVG filter definition only; never painted. */
.defs{position:absolute;width:0;height:0}

/* The hero is deliberately taller than the viewport: the photo scrolls past
   while the logo and links stay put, which is the whole effect of the page.
   hero.jpg is 2000x1333, so at 1440px tall `cover` scales it to 2160x1440 —
   height-driven, meaning the full frame scrolls top to bottom and the crop is
   horizontal only (which is what keeps the watermark out of shot).
   The 100vh floor stops it collapsing shorter than the screen. */
.hero{
  position:relative;
  min-height:max(1440px, 100vh);
  background:#2b3f4d url("img/hero.jpg") 50% 50%/cover no-repeat;
}

/* ---- Frosted glass panels -------------------------------------------------
   Chromium renders the SVG displacement filter for the full liquid effect.
   Safari and Firefox don't support url() in backdrop-filter, so they take the
   blur+saturate fallback below instead of rendering no glass at all.        */
.glass{
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.3);
  border-radius:50px;
  box-shadow:0 4px 20px rgba(0,0,0,.2);
  color:#fff;
  -webkit-backdrop-filter:blur(12px) saturate(1.4);
  backdrop-filter:blur(12px) saturate(1.4);
  transition:transform .3s;
}
@supports (backdrop-filter:url("#liquid-prism-intense")){
  .glass{
    -webkit-backdrop-filter:url("#liquid-prism-intense");
    backdrop-filter:url("#liquid-prism-intense");
  }
}
.glass:hover{transform:scale(1.02)}

/* ---- Logo ----------------------------------------------------------------
   left/right:0 plus a definite width and auto side margins centres this
   without needing a wrapper element or a transform (which would fight the
   scale() on hover).                                                       */
.logo-bar{
  position:fixed;
  top:13%;
  left:0;
  right:0;
  width:28%;
  margin:21px auto 0;
  min-height:160px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.logo-bar img{
  width:84%;
  height:auto;
  display:block;
}

/* ---- Photos / Prints ----------------------------------------------------- */
.links-row{
  position:fixed;
  top:61%;
  left:0;
  width:100%;
  padding:0 100px;
  display:flex;
  justify-content:center;
}
.links-inner{
  width:79%;
  display:flex;
  gap:0 170px;
  padding:18px 0;
}
.pill{
  flex:1 1 0;
  min-height:112px;
  padding:0 23px 0 21px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:43px;
  font-weight:600;
  line-height:1.2;
  text-decoration:none;
}
.pill:focus-visible{outline:3px solid #fff;outline-offset:4px}

/* ---- Footer -------------------------------------------------------------- */
.site-footer{
  background:#000;
  padding:16px 0;
  text-align:center;
}
.site-footer p{
  margin:0;
  color:#fff;
  font-size:16px;
  line-height:24px;
}

/* ---- Tablet --------------------------------------------------------------
   The desktop 100px gutter + 170px gap leave too little room for 43px text
   below ~1024px, so both tighten here. Desktop is untouched.               */
@media (max-width:1024px){
  .logo-bar{width:46%;min-height:140px}
  .links-row{padding:0 40px}
  .links-inner{width:94%;gap:0 40px}
  .pill{font-size:38px;min-height:100px}
}

/* ---- Phone ---------------------------------------------------------------
   Side by side pills overflow the viewport at this width, so they stack.   */
@media (max-width:767px){
  .logo-bar{top:10%;margin-top:0;width:calc(100% - 32px);min-height:118px}
  .logo-bar img{width:88%}
  .links-row{top:auto;bottom:14%;padding:0 16px}
  .links-inner{width:100%;flex-direction:column;gap:20px 0;padding:0}
  .pill{min-height:84px;font-size:32px;padding:0 16px}
}

@media (prefers-reduced-motion:reduce){
  .glass{transition:none}
  .glass:hover{transform:none}
}