/* =====================================================================
   Chill Boutique Hotel — enhancements layer.
   Loads AFTER styles.css (the original design, untouched). Adds: language
   switcher, video section, Instagram feed, and all motion (scroll reveals,
   split titles, hovers, animated cursor).
   ===================================================================== */
:root{--pink-d:#e2699b;--accent:#397b9b}
html,body{overflow-x:clip}

/* ---------- language switcher (top strip, right before Facebook) ---------- */
.lang-switch{display:flex;align-items:center;gap:6px;padding-right:24px;border-right:1px solid #b5cbd5}
.lang-switch a{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:36px;padding:0 11px;border:1px solid #7facbe;border-radius:99px;font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--ink);transition:color .25s,border-color .25s,transform .3s cubic-bezier(.3,1.6,.5,1)}
.lang-switch a:before{content:"";position:absolute;inset:0;z-index:-1;background:var(--pink);transform:translateY(101%);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.lang-switch a:hover{border-color:var(--pink);transform:translateY(-2px)}
.lang-switch a:hover:before,.lang-switch a[aria-current=true]:before{transform:none}
.lang-switch a[aria-current=true]{border-color:var(--pink)}
@media(max-width:900px){.lang-switch{padding-right:16px}}
@media(max-width:600px){
  .top-contact-links{flex-wrap:wrap;row-gap:0}
  .lang-switch{padding-right:10px;gap:4px}.lang-switch a{min-width:34px;min-height:34px;padding:0 8px;font-size:10px}
}
@media(max-width:480px){
  .top-contact-inner{padding:6px 0}
  .lang-switch{order:-1;width:100%;justify-content:center;border-right:0;padding:6px 0 4px}
  .lang-switch a{min-width:46px;min-height:36px}
  .top-contact-links{justify-content:space-between}
}

/* ---------- video section ---------- */
.video-section{background:var(--light);border-top:1px solid #a2c5d7;padding:96px 0}
.video-grid{display:grid;grid-template-columns:1fr minmax(0,380px);gap:7vw;align-items:center}
.video-copy .eyebrow{margin-bottom:18px}
.video-lede{font-size:15px;line-height:1.85;color:var(--muted);max-width:340px;margin:23px 0 26px}
.video-copy .button{margin-bottom:6px}
.video-copy .form-note{max-width:340px}
.video-stage{position:relative;padding:0 0 14px 14px}
.video-stage:before{content:'';position:absolute;inset:14px 14px 0 0;border:1px solid #7facbe;border-radius:34px;pointer-events:none}
.video-frame{position:relative;aspect-ratio:9/16;max-height:78vh;width:100%;background:var(--ink);border-radius:30px;overflow:hidden;box-shadow:0 30px 70px #19323d30}
.video-facade{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:var(--ink);color:#fff;display:block;overflow:hidden}
.video-facade img{width:100%;height:100%;object-fit:cover;object-position:62% center;opacity:.9;transition:transform 1.2s cubic-bezier(.2,.8,.2,1),opacity .4s}
.video-facade:after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(25,50,61,.82),rgba(25,50,61,.05) 55%)}
.video-play{position:absolute;left:50%;top:48%;z-index:2;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:var(--pink);color:var(--ink);display:grid;place-items:center;box-shadow:0 0 0 8px rgba(243,147,186,.28);transition:transform .45s cubic-bezier(.3,1.6,.5,1),box-shadow .4s}
.video-play svg{width:34px;height:34px;margin-left:4px}
.video-label{position:absolute;left:0;right:0;bottom:30px;z-index:2;text-align:center;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.video-facade:hover img{transform:scale(1.06);opacity:1}
.video-facade:hover .video-play{transform:scale(1.12) rotate(-6deg);box-shadow:0 0 0 14px rgba(243,147,186,.34)}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff}
@media(max-width:850px){.video-section{padding:70px 0}.video-grid{gap:44px}}
@media(max-width:700px){.video-grid{grid-template-columns:minmax(0,1fr)}.video-stage{max-width:360px;width:100%;margin-inline:auto}.video-lede{max-width:none}}

/* ---------- Instagram feed ---------- */
.ig-section{background:var(--light);border-top:1px solid #a2c5d7;padding:96px 0}
.ig-section .section-heading{margin-bottom:38px}
.ig-side{display:flex;flex-direction:column;align-items:flex-start;gap:20px;max-width:340px}
.ig-side p{color:var(--muted);font-size:15px;line-height:1.8}
.ig-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.ig-tile{position:relative;display:block;aspect-ratio:1;overflow:hidden;border-radius:3px;background:var(--blue);color:#fff}
.ig-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.ig-tile:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(25,50,61,.85),rgba(25,50,61,0) 62%);opacity:0;transition:opacity .4s}
.ig-cap{position:absolute;left:16px;right:16px;bottom:14px;z-index:2;font-size:12px;line-height:1.5;opacity:0;transform:translateY(14px);transition:opacity .4s,transform .4s;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ig-badge{position:absolute;top:12px;right:12px;z-index:2;width:28px;height:28px;color:#fff;filter:drop-shadow(0 2px 6px #0008);transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.ig-badge svg{width:100%;height:100%}
.ig-tile:hover img,.ig-tile:focus-visible img{transform:scale(1.1)}
.ig-tile:hover:after,.ig-tile:focus-visible:after{opacity:1}
.ig-tile:hover .ig-cap,.ig-tile:focus-visible .ig-cap{opacity:1;transform:none}
.ig-tile:hover .ig-badge{transform:rotate(-12deg) scale(1.15)}
.ig-tile.is-skeleton{pointer-events:none;background:linear-gradient(110deg,#d6e6ee 30%,#eaf3f7 50%,#d6e6ee 70%);background-size:220% 100%;animation:shimmer 1.6s linear infinite}
.ig-tile.is-brand{display:grid;place-items:center;text-align:center;padding:16px;font:400 26px/1.1 var(--serif);color:var(--ink);background:linear-gradient(135deg,#b9d9e9,#7facbe);overflow:hidden;word-break:break-word}
.ig-tile.is-brand span{display:block;font:700 10px var(--sans);letter-spacing:.16em;margin-top:10px;text-transform:uppercase;color:#19323dcc}
.ig-tile.is-brand:nth-child(even){background:linear-gradient(135deg,#f9c3d8,#f393ba)}
@keyframes shimmer{to{background-position:-220% 0}}
@media(max-width:900px){.ig-section{padding:70px 0}.ig-side{max-width:none;margin-top:20px}.ig-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.ig-cap{display:none}}
@media(max-width:600px){.ig-tile.is-brand{font-size:19px;padding:10px}.ig-tile.is-brand span{font-size:8px;letter-spacing:.08em}}

/* ---------- misc fixes for the 3 languages ---------- */
.before-you-go h2{font-size:clamp(30px,3.2vw,36px)}
.ribbon{flex-wrap:wrap;text-align:center}
.top-whatsapp small{white-space:nowrap}
.hero-visual figure{display:block}

/* =====================================================================
   MOTION
   ===================================================================== */
.scroll-progress{position:fixed;top:0;left:0;width:100%;height:3px;z-index:60;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--pink),#7facbe,var(--accent));pointer-events:none}
.sun{display:inline-block}.ribbon i{display:inline-block}

@media(prefers-reduced-motion:no-preference){

  /* ----- scroll reveal ----- */
  html.anim .reveal{opacity:0;translate:0 34px;transition:opacity .8s cubic-bezier(.2,.8,.2,1) var(--d,0s),translate .9s cubic-bezier(.2,.8,.2,1) var(--d,0s),transform .4s cubic-bezier(.2,.8,.2,1),background-color .3s,box-shadow .35s,border-color .35s}
  html.anim .reveal.in{opacity:1;translate:0 0}
  html.anim .hero-visual.reveal{translate:40px 0}
  html.anim .hero-visual.reveal.in{translate:0 0}
  html.anim .room-main.reveal img,html.anim .explore-image.reveal img,html.anim .rooftop-photo.reveal img{clip-path:inset(0 0 100% 0);transition:clip-path 1.25s cubic-bezier(.7,0,.2,1) .15s,transform .5s cubic-bezier(.2,.8,.2,1)}
  html.anim .room-main.reveal.in img,html.anim .explore-image.reveal.in img,html.anim .rooftop-photo.reveal.in img{clip-path:inset(0)}
  html.anim .explore-image.reveal img{clip-path:inset(100% 0 0 0)}
  html.anim .explore-image.reveal.in img{clip-path:inset(0)}
  html.anim .questions details.reveal{translate:0 22px}

  /* ----- split titles: words rise out of a mask ----- */
  .rw{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.07em .08em .14em;margin:-.07em -.08em -.14em}
  .rwi{display:inline-block}
  html.anim .rwi{transform:translateY(112%) rotate(5deg);transform-origin:0 100%;transition:transform 1s cubic-bezier(.2,.8,.2,1) calc(var(--i,0)*85ms + var(--td,0s))}
  html.anim [data-split].in .rwi{transform:none}
  html.anim #hero-title{--td:.1s}

  /* ----- nav & links ----- */
  nav>a:not(.button){position:relative}
  nav>a:not(.button):after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--pink);transform:scaleX(0);transform-origin:right;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
  nav>a:not(.button):hover:after{transform:scaleX(1);transform-origin:left}
  nav>a:hover,.text-link:hover,.contact-email:hover{text-decoration:none}
  .rooftop-nav{border-bottom:2px solid var(--pink)}.rooftop-nav:after{display:none}
  .rooftop-nav span{display:inline-block;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}.rooftop-nav:hover span{transform:translate(3px,-3px) rotate(8deg)}
  .brand .hotel-logo{transition:transform .6s cubic-bezier(.3,1.7,.5,1)}
  .brand:hover .hotel-logo{transform:rotate(-14deg) scale(1.1)}
  .text-link{transition:letter-spacing .35s cubic-bezier(.2,.8,.2,1),color .25s}
  .text-link:hover{letter-spacing:.1em;color:var(--accent)}
  .text-link>span{display:inline-block;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}.text-link:hover>span{transform:translate(4px,-3px)}
  .ribbon a,.ribbon span{transition:letter-spacing .35s,color .25s}
  .ribbon span:hover,.ribbon a:hover{letter-spacing:.18em;color:var(--accent);text-decoration:none}
  .ribbon i{animation:spinStar 7s linear infinite}
  @keyframes spinStar{to{transform:rotate(360deg)}}
  .contact-phone{transition:color .25s,letter-spacing .35s}.contact-phone:hover{color:#245a72;letter-spacing:.03em}
  .contact-email{transition:color .25s}.contact-email:hover{color:#245a72}
  .contact-socials a{position:relative;transition:transform .3s cubic-bezier(.3,1.6,.5,1),color .25s}.contact-socials a:hover{transform:translateY(-3px);color:#245a72}

  /* ----- buttons: fill sweep + arrow + magnetic ----- */
  .button{position:relative;overflow:hidden;isolation:isolate;transition:transform .3s cubic-bezier(.2,.8,.2,1),color .3s,box-shadow .3s}
  .button:before{content:"";position:absolute;inset:-1px;z-index:-1;transform:translateX(-101%);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
  .button-dark:before{background:var(--pink)}
  .button-pink:before{background:var(--cream)}
  .button:hover:before{transform:none}
  .button-dark:hover{background:var(--ink);color:var(--ink)}
  .button-pink:hover{color:var(--ink);box-shadow:0 14px 34px rgba(243,147,186,.45)}
  .button>span[aria-hidden]{display:inline-block;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
  .button:hover>span[aria-hidden]{transform:translate(4px,-4px) rotate(8deg)}
  .button{translate:var(--mx,0) var(--my,0)}
  .button:hover{transform:none}

  /* ----- top strip ----- */
  .top-social svg{transition:transform .45s cubic-bezier(.3,1.7,.5,1)}
  .top-social:hover svg{transform:translateY(-4px) rotate(-10deg) scale(1.15)}
  .top-whatsapp svg{transition:transform .45s cubic-bezier(.3,1.7,.5,1);animation:waRing 3.6s ease-in-out infinite}
  .top-whatsapp:hover svg{transform:rotate(-14deg) scale(1.18)}
  @keyframes waRing{0%,86%,100%{transform:none}90%{transform:rotate(-12deg)}94%{transform:rotate(10deg)}97%{transform:rotate(-6deg)}}

  /* ----- hero ----- */
  .hero-visual img{translate:calc(var(--px,0)*1px) calc(var(--py,0)*1px);transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
  .hero-visual:hover img{transform:scale(1.04)}
  .hero-visual{overflow:visible}
  .hero-visual figure{overflow:visible}
  .hero-stamp{animation:stampWiggle 5s ease-in-out infinite}
  @keyframes stampWiggle{0%,100%{transform:rotate(-12deg) scale(1)}50%{transform:rotate(6deg) scale(1.07)}}
  .hero-visual:hover .hero-stamp{animation-duration:1.4s}
  .hero-visual:before{animation:ringPulse 6s ease-in-out infinite}
  @keyframes ringPulse{0%,100%{scale:1;opacity:1}50%{scale:1.025;opacity:.55}}
  .sun{animation:spinStar 9s linear infinite}
  .hero-footnote:hover .sun{animation-duration:1.8s}

  /* ----- photos ----- */
  .photo-button img{transition:transform 1s cubic-bezier(.2,.8,.2,1)}
  .photo-button:hover img{transform:scale(1.06) rotate(.4deg)}
  .photo-expand{transition:transform .4s cubic-bezier(.3,1.6,.5,1),background .3s}
  .photo-button:hover .photo-expand{transform:translateY(-5px);background:var(--pink)}
  .room-main figcaption,.rooftop-photo figcaption{transition:letter-spacing .4s}
  .room-main:hover figcaption,.rooftop-photo:hover figcaption{letter-spacing:.26em}
  .rooftop-photo img,.explore-image img{transition:transform 1.3s cubic-bezier(.2,.8,.2,1)}
  .rooftop-photo:hover img{transform:scale(1.03)}
  .explore-image{overflow:hidden}
  .explore-image:hover img{transform:scale(1.06)}
  .explore-image:hover span{letter-spacing:.14em}.explore-image span{transition:letter-spacing .4s}
  .rooftop-lockup img{transition:transform .7s cubic-bezier(.3,1.7,.5,1);animation:bob 4s ease-in-out infinite}
  .rooftop-lockup:hover img{animation-play-state:paused;transform:rotate(-14deg) scale(1.14)}
  @keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-6px) rotate(2deg)}}
  .address{transition:padding .4s cubic-bezier(.2,.8,.2,1),border-color .3s}
  .address:hover{padding-left:14px;border-color:var(--pink)}
  .stay-side h3{transition:color .3s}.stay-side:hover h3{color:var(--accent)}

  /* ----- video ----- */
  .video-stage{transition:transform .6s cubic-bezier(.2,.8,.2,1)}
  .video-stage:hover{transform:translateY(-8px) rotate(.5deg)}
  .video-stage:before{transition:inset .5s cubic-bezier(.2,.8,.2,1)}
  .video-stage:hover:before{inset:20px 20px -6px -6px}
  .video-play{animation:playPulse 2.6s ease-out infinite}
  @keyframes playPulse{0%{box-shadow:0 0 0 0 rgba(243,147,186,.55)}80%,100%{box-shadow:0 0 0 26px rgba(243,147,186,0)}}
  .video-facade:hover .video-play{animation:none}

  /* ----- enquiry ----- */
  .enquiry-card{transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s}
  .enquiry-card:hover{transform:translateY(-8px);box-shadow:0 28px 60px #19323d26}
  input,select{transition:border-color .3s,box-shadow .3s,transform .3s}
  input:hover,select:hover{border-color:var(--accent)}
  input:focus,select:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 4px rgba(57,123,155,.2)}

  /* ----- FAQ ----- */
  .questions details{transition:padding .35s cubic-bezier(.2,.8,.2,1),background-color .3s}
  .questions details:hover{padding-left:12px;background:linear-gradient(90deg,rgba(243,147,186,.14),transparent 70%)}
  .questions summary span{display:inline-block;transition:transform .45s cubic-bezier(.3,1.6,.5,1),color .25s}
  .questions summary:hover span{color:var(--pink-d)}
  .questions details[open] summary span{transform:rotate(135deg)}
  .questions details[open] p{animation:faqIn .5s cubic-bezier(.2,.8,.2,1)}
  @keyframes faqIn{from{opacity:0;transform:translateY(-8px)}}

  /* ----- Instagram tiles ----- */
  .ig-tile{transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s}
  .ig-tile:hover{transform:translateY(-8px) rotate(-.6deg);box-shadow:0 24px 44px #19323d40}
  .ig-tile.is-brand:hover{transform:translateY(-8px) rotate(1deg)}
  html.anim .ig-tile{animation:tileIn .8s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--i,0)*70ms)}
  @keyframes tileIn{from{opacity:0;transform:translateY(26px) scale(.97)}}

  /* ----- footer ----- */
  .footer-top>p{transition:letter-spacing .5s,color .3s}.footer-top:hover>p{letter-spacing:.01em;color:var(--accent)}
  .footer-bottom a{transition:transform .3s cubic-bezier(.3,1.6,.5,1)}.footer-bottom a:hover{transform:translateY(-4px)}

  /* ----- dialogs ----- */
  dialog[open]{animation:dialogIn .5s cubic-bezier(.2,.8,.2,1)}
  dialog[open]::backdrop{animation:fadeIn .4s ease}
  @keyframes dialogIn{from{opacity:0;transform:translateY(30px) scale(.94)}}
  @keyframes fadeIn{from{opacity:0}}
  .dialog-close{transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
  .dialog-close:hover{transform:rotate(90deg) scale(1.15)}
}

/* ---------- animated cursor ---------- */
html.cursor-on,html.cursor-on *{cursor:none!important}
html.cursor-on.cursor-off,html.cursor-on.cursor-off *{cursor:auto!important}
.cursor{position:fixed;left:0;top:0;width:0;height:0;pointer-events:none;z-index:2147483647;opacity:0;transition:opacity .3s}
.cursor.on{opacity:1}
html.cursor-off .cursor{opacity:0!important}
.cursor-dot,.cursor-ring{position:fixed;left:0;top:0;will-change:transform;pointer-events:none}
.cursor-dot{width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 2px #fff,0 0 14px rgba(243,147,186,.8);transition:width .25s,height .25s,margin .25s,opacity .2s}
.cursor-ring{width:40px;height:40px;margin:-20px 0 0 -20px}
.cursor-ring-inner{width:100%;height:100%;border:1.5px solid var(--pink);border-radius:50%;display:grid;place-items:center;transition:transform .45s cubic-bezier(.3,1.6,.5,1),background-color .3s,border-color .3s,border-radius .3s;animation:ringBreath 3s ease-in-out infinite}
@keyframes ringBreath{50%{scale:1.1}}
.cursor-label{font:800 9px/1 var(--sans);letter-spacing:.14em;color:var(--ink);opacity:0;transform:scale(.4);transition:opacity .25s,transform .35s cubic-bezier(.3,1.6,.5,1)}
.cursor.is-link .cursor-ring-inner{transform:scale(1.7);background:rgba(243,147,186,.25);border-color:var(--pink-d)}
.cursor.is-link .cursor-dot{width:5px;height:5px;margin:-2.5px 0 0 -2.5px}
.cursor.is-view .cursor-ring-inner{transform:scale(2.3);background:var(--pink);border-color:var(--pink);animation:none}
.cursor.is-view .cursor-label{opacity:1;transform:scale(.62)}
.cursor.is-view .cursor-dot{opacity:0}
.cursor.is-text .cursor-ring-inner{transform:scale(.14,.95);border-radius:4px;background:var(--ink);border-color:var(--ink);animation:none}
.cursor.is-down .cursor-ring-inner{transform:scale(.72)}
.cursor.is-link.is-down .cursor-ring-inner{transform:scale(1.25)}
.cursor.is-view.is-down .cursor-ring-inner{transform:scale(1.9)}
.cursor-burst{position:fixed;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;border:2px solid var(--pink-d);pointer-events:none;z-index:2147483646;animation:burst .65s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes burst{to{transform:scale(7);opacity:0}}
.cursor-spark{position:fixed;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--pink);pointer-events:none;z-index:2147483646;animation:spark .7s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes spark{to{transform:translate(var(--sx),var(--sy)) scale(0);opacity:0}}

/* gallery lightbox */
.zoomable{cursor:zoom-in}
.photo-dialog{overflow:visible}
.dialog-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border:0;border-radius:50%;background:var(--cream);color:var(--ink);font-size:30px;line-height:1;box-shadow:0 4px 20px #0004;z-index:3}
.dialog-prev{left:-23px}.dialog-next{right:-23px}
.dialog-nav:hover{background:var(--pink)}
@media(max-width:700px){.dialog-prev{left:6px}.dialog-next{right:6px}.dialog-nav{width:40px;height:40px;opacity:.92}}