/* FunnyDivers - single dive site (reef) detail page.
   Extends dive-sites.css, which supplies the shared shell (topbar, buttons, footer). */

/* ---------- hero ---------- */
.reef-hero{position:relative;isolation:isolate;padding:190px 0 96px;overflow:hidden;background:#02202c;}
.reef-hero-media{position:absolute;inset:0;z-index:-2;overflow:hidden;}
.reef-hero-img{position:absolute;inset:-6%;width:112%;height:112%;object-fit:cover;will-change:transform;transform:scale(1.06);animation:reefKen 26s ease-in-out infinite alternate;}
@keyframes reefKen{
  0%{transform:scale(1.06) translate3d(0,0,0);}
  100%{transform:scale(1.16) translate3d(-2.2%,-1.6%,0);}
}
/* With JS parallax active the image's transform is scripted, so the slow zoom
   moves to the wrapper and the two no longer fight over one property. */
.reef-hero-media.is-parallax{animation:reefKen 26s ease-in-out infinite alternate;}
.reef-hero-media.is-parallax .reef-hero-img{animation:none;transform:none;will-change:transform;}
.reef-hero-veil{transition:opacity .2s linear;}
/* Drifting light caustics - two soft gradient sheets sliding at different speeds. */
.reef-hero-caustics{position:absolute;inset:-20%;z-index:-1;pointer-events:none;mix-blend-mode:soft-light;opacity:.75;
  background:
    radial-gradient(58% 34% at 22% 18%,rgba(255,255,255,.55) 0%,transparent 62%),
    radial-gradient(44% 28% at 72% 36%,rgba(120,255,240,.45) 0%,transparent 66%),
    radial-gradient(52% 30% at 46% 78%,rgba(255,255,255,.32) 0%,transparent 64%);
  filter:blur(18px);animation:reefCaustics 19s ease-in-out infinite alternate;}
@keyframes reefCaustics{
  0%{transform:translate3d(-3%,-2%,0) scale(1);}
  50%{transform:translate3d(2.5%,1.5%,0) scale(1.08);}
  100%{transform:translate3d(-1.5%,3%,0) scale(1.03);}
}
.reef-hero-veil{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(1,20,27,.82) 0%,rgba(2,34,45,.58) 38%,rgba(2,26,34,.78) 78%,rgba(2,22,30,.94) 100%),
             radial-gradient(120% 80% at 50% 0%,rgba(14,182,168,.22) 0%,transparent 60%);}
.reef-hero-inner{position:relative;z-index:2;}
.reef-hero h1{font-size:clamp(34px,6vw,74px);color:#fff;text-shadow:0 10px 40px rgba(0,0,0,.45);letter-spacing:-.01em;}
.reef-eyebrow{color:var(--accent);}
.reef-eyebrow::before{background:currentColor;}

.reef-crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin-bottom:18px;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.62);}
.reef-crumbs a{color:rgba(255,255,255,.72);transition:color .2s;}
.reef-crumbs a:hover{color:var(--accent);}
.reef-crumbs b{color:#fff;font-weight:700;}
.reef-crumbs span{opacity:.45;}

.reef-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;}
.reef-chip{display:inline-flex;align-items:center;gap:8px;padding:10px 17px;border-radius:999px;font-size:13.5px;font-weight:700;color:#eafbfa;
  background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}
.reef-chip svg{width:16px;height:16px;stroke:var(--teal2);fill:none;stroke-width:2;flex:none;}
.reef-chip.is-level{border-color:transparent;}
.reef-chip.beginner{background:rgba(34,197,94,.22);color:#b6f5cd;}
.reef-chip.intermediate{background:rgba(245,158,11,.22);color:#ffe0a3;}
.reef-chip.advanced{background:rgba(239,68,68,.22);color:#ffc4c4;}

/* ---------- body layout ---------- */
.reef-body{padding:84px 0 90px;}
.reef-grid{display:grid;grid-template-columns:minmax(0,1fr) 348px;gap:56px;align-items:start;}
.reef-main{display:flex;flex-direction:column;gap:38px;min-width:0;}

.reef-block{position:relative;padding-left:66px;}
.reef-block::before{content:attr(data-step);position:absolute;left:0;top:2px;width:46px;height:46px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;font-family:'Fredoka',sans-serif;font-size:15px;font-weight:600;
  color:var(--teal);background:#fff;border:1px solid #d6efeb;box-shadow:0 8px 22px rgba(2,40,50,.09);}
.reef-block::after{content:"";position:absolute;left:23px;top:56px;bottom:-38px;width:2px;
  background:linear-gradient(180deg,#cfeae6 0%,rgba(207,234,230,0) 100%);}
.reef-block:last-of-type::after{display:none;}
.reef-block h2{font-size:clamp(21px,2.4vw,28px);color:var(--navy);margin-bottom:14px;}
.reef-block p{font-size:15.5px;line-height:1.78;color:#456a72;}
.reef-block p + p{margin-top:14px;}

/* marine-life chips */
.reef-species{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;}
.reef-species .sp{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;font-size:12.5px;font-weight:700;
  color:#0b5f6b;background:linear-gradient(135deg,#e7f9f7 0%,#d9f3ef 100%);border:1px solid #c6e9e4;
  transition:transform .25s cubic-bezier(.2,.9,.3,1),box-shadow .25s,background .25s;}
.reef-species .sp:hover{transform:translateY(-3px);box-shadow:0 10px 20px rgba(2,40,50,.12);background:linear-gradient(135deg,#d5f4f0 0%,#c3ece6 100%);}
.reef-species .sp::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--teal);flex:none;}

/* archive photo - clip-path wipe on reveal, zoom on hover */
.reef-figure{margin:6px 0 0;border-radius:var(--r);overflow:hidden;background:#e6f5f3;box-shadow:0 18px 44px rgba(2,40,50,.13);}
.reef-figure .ph{overflow:hidden;}
.reef-figure img{width:100%;height:auto;display:block;transform:scale(1.02);
  clip-path:inset(0 100% 0 0);transition:clip-path 1.05s cubic-bezier(.16,.8,.3,1),transform .9s cubic-bezier(.16,.8,.3,1);}
.reef-figure.visible img{clip-path:inset(0 0 0 0);transform:scale(1);}
.reef-figure:hover img{transform:scale(1.045);}
.reef-figure figcaption{padding:13px 18px 16px;font-size:12.5px;line-height:1.55;color:#6b8c94;background:#fff;border-top:1px solid #e6f4f1;}

/* ---------- sidebar ---------- */
.reef-side{position:sticky;top:96px;display:flex;flex-direction:column;gap:16px;}
.reef-facts{background:#fff;border:1px solid #dff2ef;border-radius:var(--r);padding:24px 22px;box-shadow:0 10px 32px rgba(2,40,50,.08);}
.reef-facts h3{font-size:17px;color:var(--navy);margin-bottom:16px;}
.reef-facts dl{margin:0;display:flex;flex-direction:column;gap:0;}
.reef-facts dl>div{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px dashed #e3f2ef;}
.reef-facts dl>div:last-child{border-bottom:none;}
.reef-facts dt{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#7fa0a7;flex:none;}
.reef-facts dd{margin:0;font-size:14.5px;font-weight:700;color:var(--navy);text-align:right;}
.reef-cond{margin-top:16px;padding:15px 16px;border-radius:14px;background:linear-gradient(135deg,#eefaf8 0%,#e3f5f1 100%);border:1px solid #d3ece8;}
.reef-cond h4{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);margin-bottom:7px;font-family:'Plus Jakarta Sans',sans-serif;}
.reef-cond p{font-size:13.5px;line-height:1.62;color:#456a72;}
.reef-facts .btn{width:100%;justify-content:center;margin-top:16px;}
.reef-facts .btn-ghost{color:var(--navy);border-color:#cfe8e3;background:#f2fbfa;}
.reef-facts .btn-ghost:hover{background:#e6f6f4;}

/* ---------- prev / next ---------- */
.reef-nav-band{background:linear-gradient(180deg,#eefaf8 0%,var(--foam) 100%);border-top:1px solid #e0f1ee;border-bottom:1px solid #e0f1ee;padding:26px 0;}
.reef-prevnext{display:flex;gap:16px;justify-content:space-between;flex-wrap:wrap;}
.reef-pn{display:flex;align-items:center;gap:14px;padding:14px 20px;border-radius:16px;background:#fff;border:1px solid #dff2ef;
  box-shadow:0 6px 20px rgba(2,40,50,.06);min-width:min(100%,270px);
  transition:transform .3s cubic-bezier(.2,.9,.3,1),box-shadow .3s,border-color .3s;}
.reef-pn:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(2,40,50,.14);border-color:#bde5df;}
.reef-pn.next{margin-inline-start:auto;flex-direction:row-reverse;text-align:right;}
.reef-pn img{width:56px;height:56px;border-radius:12px;object-fit:cover;flex:none;}
.reef-pn small{display:block;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#8fb0b6;margin-bottom:3px;}
.reef-pn b{display:block;font-family:'Fredoka',sans-serif;font-size:15.5px;font-weight:600;color:var(--navy);}

/* ---------- more sites ---------- */
.reef-more{padding:76px 0 84px;}
.reef-more h2{font-family:'Fredoka',sans-serif;font-size:clamp(24px,3vw,36px);color:var(--navy);margin-bottom:8px;}
.reef-more .lede{color:#4b6d75;font-size:15px;line-height:1.65;margin-bottom:30px;}
.reef-more-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}

@media(max-width:1080px){
  .reef-grid{grid-template-columns:1fr;gap:40px;}
  .reef-side{position:static;}
  .reef-more-grid{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:760px){
  .reef-hero{padding:150px 0 70px;}
  .reef-block{padding-left:0;}
  .reef-block::before{position:static;margin-bottom:12px;width:40px;height:40px;}
  .reef-block::after{display:none;}
  .reef-more-grid{grid-template-columns:1fr 1fr;}
  .reef-pn.next{margin-inline-start:0;}
}
@media(max-width:500px){
  .reef-more-grid{grid-template-columns:1fr;}
  .reef-pn{width:100%;}
}

@media(prefers-reduced-motion:reduce){
  .reef-hero-img{animation:none;transform:scale(1.02);}
  .reef-hero-caustics{animation:none;}
  .reef-figure img{clip-path:none;transform:none;transition:none;}
  .reef-figure:hover img{transform:none;}
  .reef-species .sp:hover,.reef-pn:hover{transform:none;}
}