/* footer.css — shared "lakeside at dusk" footer (same as lakeshore page). Load after premium.css / inner.css. */
/* =====================================================================
   FOOTER: lakeside at dusk. Real photo, floating lanterns, ripples that follow
   the cursor / finger, a lantern-lit wordmark with a rippling reflection.
   (built by the last block in stay.js)
   ===================================================================== */
body>footer.ftx{position:relative;isolation:isolate;padding-top:0;background:var(--g9);padding-bottom:5rem}
body>footer.ftx>.w{position:relative;z-index:3}
body>footer.ftx .fg{margin-top:2rem}
.ft-scene{position:relative;height:clamp(320px,38vw,500px);overflow:hidden;background:var(--g9);--sp:1;cursor:crosshair}
.ft-ph{position:absolute;inset:-12% 0;z-index:0}
.ft-ph img{width:100%;height:100%;object-fit:cover;object-position:50% 60%;translate:0 calc((var(--sp) - .5)*-60px);scale:calc(1.03 + var(--sp)*.07);filter:saturate(.9) contrast(1.05)}
.ft-mist{position:absolute;z-index:1;left:-25%;right:-25%;bottom:6%;height:50%;pointer-events:none;filter:blur(16px);mix-blend-mode:screen;opacity:.8;background:radial-gradient(40% 100% at 25% 60%,rgba(226,234,243,.2),transparent 70%),radial-gradient(35% 90% at 70% 45%,rgba(226,234,243,.15),transparent 70%);animation:ftmist 46s ease-in-out infinite alternate}
.ft-mist.m2{bottom:22%;height:40%;opacity:.55;animation-duration:70s;animation-direction:alternate-reverse}
@keyframes ftmist{from{transform:translateX(-9%)}to{transform:translateX(9%)}}
.ft-glow{position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:screen;opacity:var(--go,0);transition:opacity .6s;background:radial-gradient(280px circle at var(--gx,50%) var(--gy,60%),rgba(255,214,150,.3),transparent 70%)}
.ft-scene>canvas{position:absolute;z-index:3;inset:0;width:100%;height:100%;pointer-events:none}
.ft-shade{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(80% 60% at 12% 100%,rgba(var(--accrgb),.2),transparent 70%),linear-gradient(180deg,rgba(var(--g9rgb),.7) 0%,rgba(var(--g9rgb),.12) 38%,rgba(var(--g9rgb),.7) 82%,var(--g9) 100%)}
.ft-txt{position:absolute;z-index:4;left:0;right:0;top:clamp(2rem,5vw,3.6rem);text-align:center;padding:0 1.5rem;pointer-events:none}
.ft-txt .lbl{color:var(--brassl);opacity:0;transition:opacity 1s .1s}
.ft-txt.seen .lbl{opacity:1}
.ft-line{margin:.9rem auto 0;max-width:20ch;font:500 clamp(2rem,4.6vw,3.8rem)/1.02 var(--serif);color:#fff;text-shadow:0 6px 40px rgba(0,0,0,.5);text-wrap:balance}
.ft-line em{color:var(--brassl)}
.ft-line .wd>span{display:inline-block}
.ftfx .ft-line .wd>span{transform:translateY(112%);transition:transform 1.1s var(--ease);transition-delay:calc(.2s + var(--w,0)*90ms)}
.ftfx .ft-txt.seen .ft-line .wd>span{transform:none}
.ft-top{position:absolute;z-index:5;right:max(1.2rem,calc((100vw - 1160px)/2));bottom:1.4rem;width:50px;height:50px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(var(--g9rgb),.45);backdrop-filter:blur(10px);color:#fff;cursor:pointer;font:400 1.3rem/1 Jost;display:grid;place-items:center;transition:background .3s,color .3s,border-color .3s,transform .5s var(--ease)}
.ft-top:hover{background:var(--brass);border-color:var(--brass);color:var(--g9);transform:translateY(-6px)}

/* wordmark: a lantern light (--lx) glides across the letters; reflection below ripples */
body>footer.ftx .mark{position:relative;z-index:2;width:max-content;max-width:none;margin:2.2rem 0 0;padding-bottom:.04em;line-height:1;white-space:nowrap;-webkit-text-stroke:1px rgba(var(--accrgb),.6);
 background:radial-gradient(ellipse 1.5em .95em at var(--lx,-40%) 55%,rgba(255,243,208,1),rgba(236,217,172,.75) 38%,transparent 72%) no-repeat,linear-gradient(180deg,rgba(var(--accrgb),.7),rgba(var(--accrgb),.13));
 -webkit-background-clip:text;background-clip:text}
body>footer.ftx .mark span{display:inline}
.ft-wl{position:relative;z-index:2;width:100%;height:1px;margin:.05em 0 0;background:linear-gradient(90deg,transparent,rgba(var(--accrgb),.8) 20%,rgba(255,243,208,.95) var(--lx,50%),rgba(var(--accrgb),.8) 80%,transparent);box-shadow:0 0 18px rgba(var(--accrgb),.5)}
body>footer.ftx .ft-ref{transform:scaleY(-1);margin:.1em 0 -.5em;opacity:.45;filter:url(#ftw);pointer-events:none;user-select:none;-webkit-mask:linear-gradient(0deg,#000 0%,rgba(0,0,0,.55) 30%,transparent 62%);mask:linear-gradient(0deg,#000 0%,rgba(0,0,0,.55) 30%,transparent 62%)}
@media(max-width:700px){body>footer.ftx .mark{text-align:center}body>footer.ftx .mark span{display:block}}
body>footer.ftx .fg li a{background:linear-gradient(var(--brass),var(--brass)) 0 100%/0 1px no-repeat;transition:background-size .45s var(--ease),color .3s;padding-bottom:2px}
body>footer.ftx .fg li a:hover{background-size:100% 1px}
@media(prefers-reduced-motion:reduce){.ft-mist{animation:none}body>footer.ftx .ft-ref{filter:none}}

/* =====================================================================
   FOOTER CONTENT: brand header, quick facts, contact cards, link columns
   ===================================================================== */
body>footer.ftx svg{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ft-head{display:flex;align-items:center;gap:1.4rem 2rem;flex-wrap:wrap;padding-top:2.4rem}
.ft-head .logo{flex:none}
.ft-tag{flex:1 1 18rem;max-width:34rem;margin:0;font:500 clamp(1.3rem,2.2vw,1.7rem)/1.3 var(--serif);color:var(--softer)}
.ft-tag em{color:var(--brassl)}
.ft-soc{display:flex;gap:.6rem}
.ft-soc a{position:relative;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:var(--cream);border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.04);transition:background .35s,color .35s,border-color .35s,transform .5s var(--ease)}
.ft-soc a:hover{background:var(--brass);border-color:var(--brass);color:var(--g9);transform:translateY(-5px) rotate(-6deg)}
.ft-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;margin-top:2rem}
.ft-facts li{padding:1rem 1.2rem;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(var(--accrgb),.28);transition:border-color .4s,transform .5s var(--ease)}
.ft-facts li:hover{border-color:rgba(var(--accrgb),.8);transform:translateY(-4px)}
.ft-facts span{display:block;font:500 .7rem Jost;letter-spacing:.18em;text-transform:uppercase;color:var(--soft)}
.ft-facts b{display:block;margin-top:.15rem;font:500 clamp(1.5rem,2.4vw,1.9rem)/1.1 var(--serif);color:var(--brassl)}
body>footer.ftx .fg{grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.4rem 2rem;margin-top:2.6rem;padding-top:2.4rem;border-top:1px solid rgba(255,255,255,.12)}
body>footer.ftx .fg h3{position:relative;padding-bottom:.9rem;margin-bottom:1.2rem}
body>footer.ftx .fg h3::after{content:"";position:absolute;left:0;bottom:0;width:2rem;height:1px;background:var(--brass);transition:width .6s var(--ease)}
body>footer.ftx .fg>div:hover h3::after{width:4rem}
body>footer.ftx .fg li{margin-bottom:.2rem}
body>footer.ftx .fg li a{display:inline-flex;align-items:center;padding:.3rem 0;background:none;transition:color .3s,transform .45s var(--ease)}
body>footer.ftx .fg li a::before{content:"";width:0;height:1px;margin-right:0;background:var(--brass);transition:width .45s var(--ease),margin .45s var(--ease)}
body>footer.ftx .fg li a:hover{color:#fff;transform:none}
body>footer.ftx .fg li a:hover::before{width:1rem;margin-right:.6rem}
.ft-c{display:grid;gap:.6rem;align-content:start}
.ft-c h3{margin-bottom:.6rem!important}
.ft-card{position:relative;display:flex;align-items:center;gap:.9rem;padding:.8rem 1rem;border-radius:16px;color:var(--cream);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);overflow:hidden;transition:border-color .4s,transform .5s var(--ease),background-color .4s}
body>footer.ftx .ft-card svg{width:2.4rem;height:2.4rem;padding:.6rem;box-sizing:border-box;border-radius:50%;background:rgba(var(--accrgb),.16);color:var(--brassl);transition:background .4s,color .4s}
.ft-card span{min-width:0;overflow-wrap:anywhere;line-height:1.3;font-size:.97rem}
.ft-card small{display:block;font:500 .66rem Jost;letter-spacing:.18em;text-transform:uppercase;color:var(--soft);margin-bottom:.1rem}
.ft-card:hover{border-color:rgba(var(--accrgb),.8);transform:translateX(5px);background-image:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(var(--accrgb),.2),transparent 65%)}
body>footer.ftx .ft-card:hover svg{background:var(--brass);color:var(--g9)}
.ft-bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 1.5rem;margin-top:1.6rem;padding-top:1.3rem;border-top:1px solid rgba(255,255,255,.12);font-size:.88rem;color:var(--soft)}
/* reveal on scroll */
.ftfx .ft-rv{opacity:0;translate:0 26px;transition:opacity .9s var(--ease),translate .9s var(--ease);transition-delay:calc(var(--k,0)*90ms)}
.ftfx .ft-rv.in{opacity:1;translate:0 0}
@media(max-width:1000px){body>footer.ftx{padding-bottom:7rem}.ft-facts{grid-template-columns:repeat(2,1fr)}body>footer.ftx .fg{grid-template-columns:1fr 1fr}.ft-c{grid-column:1/-1;grid-template-columns:1fr 1fr}.ft-c h3{grid-column:1/-1}}
@media(max-width:560px){.ft-head{padding-top:1.8rem}.ft-c{grid-template-columns:1fr}.ft-tag{flex-basis:100%}}
@media(prefers-reduced-motion:reduce){.ftfx .ft-rv{opacity:1;translate:none;transition:none}}

/* ===== mobile footer cleanup (phones only) ===== */
@media (max-width:700px){
  /* 1. remove the huge two-line wordmark + garbled water reflection (logo is already at the top of the footer) */
  body>footer.ftx .mark,
  body>footer.ftx .ft-ref,
  body>footer.ftx .ft-wl{display:none}

  /* 2. Reach-us cards: tighter so the footer is shorter */
  .ft-c{gap:.5rem}
  .ft-card{padding:.65rem .85rem;border-radius:14px}
  body>footer.ftx .ft-card svg{width:2.1rem;height:2.1rem;padding:.5rem}
  .ft-card:hover{transform:none}

  /* 3. Stays + Plan your trip stay side by side; Legal becomes one compact row */
  body>footer.ftx .fg{gap:1.8rem 1.4rem;margin-top:1.8rem;padding-top:1.8rem}
  body>footer.ftx .fg>div:last-child{grid-column:1/-1;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.12)}
  body>footer.ftx .fg>div:last-child h3{display:none}
  body>footer.ftx .fg>div:last-child ul{display:flex;flex-wrap:wrap;gap:.1rem 1.3rem}
  body>footer.ftx .fg>div:last-child li a{font-size:.88rem;color:var(--soft)}

  /* 4. copyright bar: centred, stacked, clear of the sticky Book bar */
  .ft-bar{flex-direction:column;align-items:center;text-align:center;gap:.3rem;margin-top:1.2rem;padding-top:1.1rem}
  body>footer.ftx{padding-bottom:7.5rem}
}


/* ===== desktop / tablet footer polish (701px and up) ===== */
@media (min-width:701px){
  /* 1. wordmark: smaller, centred, not edge-to-edge */
  body>footer.ftx .mark,
  body>footer.ftx .ft-ref{
    font-size:clamp(3.4rem,7.2vw,7.2rem)!important;
    margin-inline:auto;
  }
  body>footer.ftx .mark{margin-top:3rem}
  /* 2. reflection: clean mirror instead of the distorted/garbled ripple filter */
  body>footer.ftx .ft-ref{
    filter:none;
    opacity:.22;
    margin-top:.06em;margin-bottom:-.35em;
    -webkit-mask:linear-gradient(0deg,#000 0%,rgba(0,0,0,.35) 28%,transparent 52%);
            mask:linear-gradient(0deg,#000 0%,rgba(0,0,0,.35) 28%,transparent 52%);
  }
  /* waterline: fade at the ends, shorter than the full width */
  .ft-wl{width:min(100%,760px);margin-inline:auto}
  .ft-bar{margin-top:2rem}
}

/* 3. desktop: balance the columns — Reach-us cards become a 2x2 grid so that column
      is no longer much taller than Stays / Plan / Legal */
@media (min-width:1001px){
  body>footer.ftx .fg{grid-template-columns:2.2fr .8fr .95fr .8fr;gap:2.4rem 2.6rem}
  .ft-c{grid-template-columns:1fr 1fr;gap:.7rem}
  .ft-c h3{grid-column:1/-1}
  .ft-c .ft-card:nth-of-type(n+3){grid-column:auto}
  .ft-card span{font-size:.92rem}
  .ft-card:hover{transform:translateY(-3px)}
}