/* ============ Palm Tree Storage — Flagship test layer ============
   Additive only: branded loader, scroll reveals, hero motion,
   micro-interactions, animated icons, progress bar, back-to-top, parallax.
   Brand: royal blue #2C4194 on white. Respects prefers-reduced-motion. */

/* ---------- Location gate fade-in (after loader) ---------- */
.loc-gate{opacity:0;transition:opacity .9s ease}
.loc-gate.gate-in{opacity:1}
.loc-gate[hidden]{display:none !important}

/* ---------- Scroll progress bar ---------- */
#scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:100%;z-index:1500;
  background:linear-gradient(90deg,var(--teal-deep),var(--teal));
  transform-origin:0 50%;transform:scaleX(0);pointer-events:none;
}

/* ---------- Back to top ---------- */
#to-top{
  position:fixed;right:20px;bottom:20px;z-index:900;width:50px;height:50px;border-radius:50%;
  background:var(--teal);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 28px rgba(29,47,107,.35);opacity:0;pointer-events:none;transform:translateY(12px);
  transition:opacity .3s,transform .3s,background .2s;
}
#to-top.show{opacity:1;pointer-events:auto;transform:none}
#to-top:hover{background:var(--teal-deep)}
#to-top svg{width:22px;height:22px;stroke:#fff;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:640px){#to-top{bottom:92px;right:16px}}

/* ---------- Page loader (palm emblem) ---------- */
#page-loader{
  position:fixed;inset:0;z-index:2000;background:#fff;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  transition:opacity .4s ease,visibility .4s;
}
#page-loader.done{opacity:0;visibility:hidden;pointer-events:none}
.loader-palm{width:88px;height:88px;filter:drop-shadow(0 6px 18px rgba(44,65,148,.25))}
.loader-palm .draw{stroke:#2C4194;stroke-width:3.5;fill:none;stroke-linecap:round;
  stroke-dasharray:100;stroke-dashoffset:100;animation:draw .7s ease forwards}
.loader-palm .draw:nth-child(2){animation-delay:.08s}
.loader-palm .draw:nth-child(3){animation-delay:.16s}
.loader-palm .draw:nth-child(4){animation-delay:.24s}
.loader-palm .draw:nth-child(5){animation-delay:.32s}
.loader-palm .draw:nth-child(6){animation-delay:.4s}
@keyframes draw{to{stroke-dashoffset:0}}
.loader-word{font-family:'Nunito',system-ui,sans-serif;font-weight:800;font-size:1.05rem;
  letter-spacing:.28em;text-transform:uppercase;color:var(--teal-ink);
  opacity:0;animation:fadeUp .5s .35s ease forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.loader-bar{width:150px;height:3px;border-radius:3px;background:var(--aqua-band);overflow:hidden}
.loader-bar i{display:block;height:100%;width:40%;border-radius:3px;background:var(--teal);animation:loadslide .9s ease-in-out infinite}
@keyframes loadslide{0%{transform:translateX(-110%)}100%{transform:translateX(380%)}}

/* ---------- Scroll reveals ---------- */
.rv{opacity:0;transform:translateY(50px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.6,.2,1);will-change:opacity,transform}
.rv.in{opacity:1;transform:none}
.rv-l{opacity:0;transform:translateX(-56px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.6,.2,1)}
.rv-l.in{opacity:1;transform:none}
.rv-r{opacity:0;transform:translateX(56px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.6,.2,1)}
.rv-r.in{opacity:1;transform:none}
.rv-zoom{opacity:0;transform:scale(.9);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.6,.2,1)}
.rv-zoom.in{opacity:1;transform:none}

/* ---------- Hero entrance ---------- */
.hero h1 .w{display:inline-block;opacity:0;transform:translateY(.55em);
  animation:wordUp .65s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes wordUp{to{opacity:1;transform:none}}
.hero .hero-badges{opacity:0;animation:fadeUp .6s .05s ease forwards}
.hero .lede{opacity:0;animation:fadeUp .6s .35s ease forwards}
.hero-ctas .btn{opacity:0;animation:popIn .5s cubic-bezier(.2,.9,.3,1.25) forwards}
.hero-ctas .btn:nth-child(1){animation-delay:.55s}
.hero-ctas .btn:nth-child(2){animation-delay:.68s}
@keyframes popIn{from{opacity:0;transform:scale(.85) translateY(10px)}to{opacity:1;transform:none}}
.hero .hbadge{animation:floaty 7s ease-in-out infinite}
.hero .hbadge:nth-child(2n){animation-delay:-2.4s}
.hero .hbadge:nth-child(3n){animation-delay:-4.8s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
/* floating decorative palm fronds */
.hero-frond{position:absolute;z-index:1;pointer-events:none;opacity:.14;animation:drift 11s ease-in-out infinite}
.hero-frond.f2{animation-delay:-5.5s;animation-duration:13s}
@keyframes drift{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-16px) rotate(3deg)}}
@media(max-width:640px){.hero-frond{display:none}}
/* parallax helper (JS-driven) */
.hero-palms{animation:drift 12s ease-in-out infinite}

/* ---------- Micro-interactions ---------- */
.card{transition:transform .25s cubic-bezier(.2,.7,.3,1.15),box-shadow .25s,border-color .25s}
.card:hover{transform:translateY(-6px);box-shadow:0 22px 55px rgba(29,47,107,.16);border-color:#c9d4ef}
.tcard{transition:transform .25s cubic-bezier(.2,.7,.3,1.15),box-shadow .25s}
.tcard:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.step{transition:transform .25s}
.step:hover{transform:translateX(4px)}
.btn{position:relative;overflow:hidden;transition:transform .12s ease,filter .15s,box-shadow .2s}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(29,47,107,.22)}
.btn:active{transform:translateY(1px) scale(.98)}
.btn::after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg);transition:left .5s ease;pointer-events:none}
.btn:hover::after{left:130%}
/* phone buttons: subtle pulse ring */
.btn[href^="tel:"]{animation:phonePulse 2.6s ease-in-out infinite}
@keyframes phonePulse{0%,100%{box-shadow:0 0 0 0 rgba(44,65,148,.28)}50%{box-shadow:0 0 0 9px rgba(44,65,148,0)}}
.btn[href^="tel:"]:hover{animation:none}

/* ---------- Animated SVG icons ---------- */
.ficon{display:inline-block;width:38px;height:38px;flex:none;vertical-align:middle}
.ficon svg{width:100%;height:100%;stroke:var(--teal);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.ficon .draw{stroke-dasharray:100;stroke-dashoffset:100}
.rv.in .ficon .draw,.tcard.in .ficon .draw{animation:draw .9s .25s ease forwards}
.tcard .ic{display:flex;align-items:center;justify-content:center;min-height:46px}
.ficon{animation:floaty 6s ease-in-out infinite}
.tcard:nth-child(2n) .ficon{animation-delay:-2s}
.tcard:nth-child(3n) .ficon{animation-delay:-4s}

/* ---------- Location gate: white theme (Cody) ---------- */
.loc-gate{background:#fff}
.loc-gate-welcome{color:var(--teal-ink);opacity:.75}
.loc-gate-card h2{color:var(--teal-ink)}
.loc-gate-btns .btn{background:var(--teal-ink);color:#fff}
.loc-gate-btns .btn:hover{background:#0f1839;filter:none}

/* ---------- Reduced motion: everything off ---------- */
@media (prefers-reduced-motion:reduce){
  #page-loader{display:none}
  #scroll-progress{display:none}
  .rv,.rv-l,.rv-r,.rv-zoom{opacity:1!important;transform:none!important;transition:none!important}
  .hero h1 .w,.hero .hero-badges,.hero .lede,.hero-ctas .btn{opacity:1!important;animation:none!important;transform:none!important}
  .hero .hbadge,.hero-frond,.hero-palms,.ficon,.btn[href^="tel:"]{animation:none!important}
  .ficon .draw{stroke-dashoffset:0!important}
  .btn::after{display:none}
  html{scroll-behavior:auto}
}

/* ---------- Softened facility photos ---------- */
.soft-photo{display:block;max-width:100%;height:auto;border-radius:20px;box-shadow:0 18px 50px rgba(23,60,120,.18)}
.photo-band{margin:0 auto;max-width:960px;padding:6px 20px 10px}
.photo-band .soft-photo{width:100%}
.photo-cap{text-align:center;color:#5b6b8c;font-size:.92rem;margin:12px 0 0}
.tssa-line{display:flex;align-items:center;justify-content:center;gap:14px;margin:34px auto 8px;max-width:640px;padding:0 20px}
.tssa-line img{height:64px;width:auto;border-radius:14px;box-shadow:0 10px 26px rgba(23,60,120,.16)}
.tssa-line span{font-weight:700;color:var(--teal-ink)}

/* Real TSSA badge in the trust card */
.tssa-ficon img{height:44px;width:auto;border-radius:10px;box-shadow:0 8px 20px rgba(23,60,120,.18)}

/* Trust cards as buttons */
a.tcard{text-decoration:none;color:inherit;cursor:pointer}
a.tcard:hover{text-decoration:none}

/* Customer request: faded gated-facility photo on the intro screen background */
.loc-gate{background-image:linear-gradient(rgba(255,255,255,.92),rgba(255,255,255,.92)),url("../img/gate-facility.jpg");background-size:cover;background-position:center;background-repeat:no-repeat}

/* Contact page: both call buttons equal width, compact, stacked on mobile */
.contact-calls{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:16px}
.contact-calls .btn{flex:0 0 auto;width:100%;max-width:280px;font-size:.95rem;padding:12px 20px;margin:0 auto}
.contact-calls .btn .num{font-size:1.05rem}
@media(max-width:600px){.contact-calls{flex-direction:column;align-items:stretch}.contact-calls .btn{max-width:none}}