@charset "utf-8";
/* CSS Document */

/* ===============================
   FONT
   =============================== */
/* ✅ FIX: correct path from css/main.css -> ../fonts/... */
@font-face{
  font-family:"Oxanium";
  src: url("fonts/Oxanium/Oxanium-VariableFont_wght.ttf") format("truetype");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

/* ===============================
   RESET / BASE
   =============================== */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:clip;}
body{
  font-family:"Oxanium",sans-serif;
  background:#fff;
  color:#333;
  overflow-x:hidden;
}

/* Ensure no weird gaps between sections and bottom banner */
section,
.bottom-banner{
  margin:0;
  border:0;
}

/* Slightly tighten spacing in content text only */
.content-block,
.under-carousel-text,
.home-snippet-mobile{
  word-spacing:-0.1em;
}

/* ===============================
   VARIABLES
   =============================== */
:root{
  --hero-vh:100vh;
  --hero-carousel-width:clamp(660px,62vw,820px);
  --hero-carousel-offset-top:clamp(-72px,-7vh,-36px);
  --hero-carousel-offset-bottom:clamp(88px,12vh,150px);
  --hero-text-width:500px;
  --text-scale:1;
}

/* ===============================
   TOP DROP
   =============================== */
.top-drop{
  position:absolute;
  top:0;
  right:0;
  left:auto;

  width:520px;
  height:180px;

  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'>\
<path fill='%23c8b8b0' d='M720,0 C900,20 1020,80 1140,120 C1260,160 1350,170 1440,150 L1440,0 Z'/>\
</svg>");
  background-repeat:no-repeat;
  background-position:right top;
  background-size:auto 100%;

  pointer-events:none;
  z-index:10;
}

/* Wrapper */
.main-content{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* ===============================
   SECTIONS
   =============================== */
section{
  padding:60px 20px;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
}

/* perf */
section:not(#home-section){
  content-visibility:auto;
  contain-intrinsic-size:1000px;
}

/* ===============================
   HOME
   =============================== */
#home-section{
  min-height:100vh;
  overflow:hidden;
  cursor:pointer;
  position:relative;
}

/* Curved bottom wave, connects video to Cinematography */
#home-section::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;
  width:100%;
  height:clamp(140px,20vw,220px);
  pointer-events:none;
  z-index:11;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:top center;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2600 220'>\
<path fill='%23ffffff' d='M0,80 C260,40 540,10 860,40 C1160,70 1420,140 1740,150 C2040,160 2320,130 2600,90 L2600,220 L0,220 Z'/>\
</svg>");
}

/* Right-side home logo */
.home-logo-right{
  position:absolute;
  right:-15%;
  top:50%;
  transform:translateY(-50%);
  width:1100px;
  height:auto;
  aspect-ratio:3 / 1;
  background:url("../logo0.png") center / contain no-repeat;
  z-index:25;
  pointer-events:none;
  opacity:0.95;
  mix-blend-mode:normal;
  transition:transform .35s ease, opacity .35s ease;
}

/* When home text overlay is active, hide the big home logo */
body.home-text-active .home-logo-right{
  opacity:0;
  transform:translateY(-130%);
}

/* Logo pushed up when home text overlay is visible (legacy desktop) */
#logoBox.logo-pushed-up{
  transform:translateY(-200px);
  transition:transform .3s ease;
}

/* ===============================
   HOME HERO – FULL VIEWPORT
   =============================== */

/* Hero container fills viewport */
#home-section .media-player{
  position:absolute;
  inset:0;
  width:100vw;
  height:100vh;
  margin:0;
  border-radius:0;
  box-shadow:none;
  max-width:none;


  background:#000;
  z-index:5;
  overflow:hidden;
}

/* Carousel items */
#home-section .carousel-item {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s;
}

/* Active slide */
#home-section .carousel-item.active {
  opacity: 1;
  z-index: 1;
}

/* HERO POSTER IMAGE – on top initially */
#home-section .carousel-item .hero-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;              /* above the iframe */
  opacity: 1;
  transition: opacity .8s ease;
  pointer-events: none;
}

/* Vimeo iframe behaves like background-size: cover */
#home-section .carousel-item iframe,
#home-section .carousel-item video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 100vw;
  height: 100vh;

  min-width: calc(100vh * 16 / 9);
  min-height: calc(100vw * 9 / 16);

  border: 0;
  display: block;
  pointer-events: auto;
  z-index: 1;              /* under the poster */
  opacity: 0;              /* start hidden */
  transition: opacity .8s ease;
}

/* When the video is “ready”, crossfade poster OUT and video IN */
#home-section .carousel-item.video-ready .hero-poster {
  opacity: 0;
}
#home-section .carousel-item.video-ready iframe,
#home-section .carousel-item.video-ready video {
  opacity: 1;
}

/* Arrows */
.arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(0,0,0,.5);
  color:#fff;
  border:none;
  font-size:2rem;
  padding:0 10px;
  cursor:pointer;
  opacity:0;
  transition:opacity .3s;
  z-index:30;
}

/* Hide arrows for HOME hero */
#home-section .arrow{
  display:none !important;
}

#home-section .media-player:hover .arrow,
.cinema-player:hover .arrow,
.production-player:hover .arrow{opacity:1;}
.arrow.left{left:10px;}
.arrow.right{right:10px;}

/* ===============================
   HOME TEXT OVERLAY (on top of video)
   =============================== */
#home-text-section{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:6vh 20px 12vh;
  z-index:40;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  cursor:pointer;
  width:100%;
  min-height:100vh;
  transition:opacity .3s ease;
}

#home-text-section.home-overlay-visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

#home-text-section.home-overlay-hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.home-text-section{
  position:relative;
}

.home-text-wrapper{
  position:relative;
  width:100%;
  max-width:950px;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:auto;
  cursor:pointer;
}

.home-text-wrapper *{ cursor:inherit; }

/* SVG shape stays hidden for now */
.home-text-shape{ display:none; }

#home-text-section .content-block{
  position:relative;
  z-index:3;
  cursor:pointer;
  margin:0;

  color:white;
  font-size:1.35rem;
  line-height:1.6;
  text-align:justify;
  font-style:italic;

  background: rgba(0,0,0,0.35);
  padding: 32px 40px;
  border-radius: 0;

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  mask-image: radial-gradient(
    ellipse at center,
    black 85%,
    transparent 100%
  );
  -webkit-mask-image: radial-gradient(
    ellipse at center,
    black 85%,
    transparent 100%
  );
}

/* Optional hint text inside home overlay */
#home-text-section .hint-swipe{
  margin-top:10px;
  font-size:0.8rem;
  opacity:0;
  transform:translateY(4px);
  text-align:center;
  letter-spacing:0.06em;
  text-transform:uppercase;
  transition:opacity 0.22s ease-out, transform 0.22s ease-out;
}

#home-text-section.home-overlay-visible .hint-swipe{
  opacity:0.75;
  transform:translateY(0);
}

/* HOME – “WORK” link under the text */
#home-text-section .home-work-cta{
  margin-top:24px;
  text-align:right;
}

.home-work-link{
  display:inline-block;
  position:relative;
  font:inherit;
  font-style:italic;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:aliceblue;
  text-decoration:none;
  cursor:pointer;
}

.home-work-link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-0.12em;
  width:100%;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .28s ease;
}

.home-work-link:hover::after{
  transform:scaleX(1);
}

#home-text-section .content-block p{
  margin-bottom:16px;
  text-align-last:center;
  -webkit-text-align-last:center;
}

/* ===============================
   SECTION WAVES
   =============================== */
section:not(#home-section){
  position:relative;
  padding-top:clamp(140px,20vw,220px);
  justify-content:flex-start;
  display:flex;
  flex-direction:column;
  align-items:center;
}

section:not(#home-section)::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:clamp(100px,18vw,180px);
  background-repeat:no-repeat;
  background-size:cover;
  background-position:bottom center;
  z-index:0;
  pointer-events:none;
}

section:not(#home-section) > *{
  position:relative;
  z-index:2;
}

.section-clip{
  position:relative;
  width:100%;
  display:flex;
  justify-content:center;
  z-index:3;
}

/* ===============================
   ✅ SCROLL CIRCLE ARROWS (Cine/Prod down, Commercial up)
   =============================== */

/* DESKTOP – fixed to viewport */
.section-scroll-btn{
  position:fixed;
  left:50%;
  top:90vh;
  transform:translateX(-50%);
  width:56px;
  height:56px;
  border-radius:999px;

  border:3px solid #ffffff;
  background:transparent;

  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:60;
  pointer-events:auto;
  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    opacity .18s ease;
}

/* Desktop hover – only scale, keep same position */
.section-scroll-btn:hover{
  transform:translateX(-50%) scale(1.04);
  border-color:#333333;
  box-shadow:0 8px 18px rgba(0,0,0,0.18);
}

.section-scroll-btn:active{
  transform:translateX(-50%) scale(0.97);
  box-shadow:0 4px 10px rgba(0,0,0,0.18);
  opacity:0.9;
}

/* icon inside the circle */
.section-scroll-icon{
  position:relative;
  width:18px;
  height:18px;
}

/* little arrow (chevron) */
.section-scroll-icon::before{
  content:"";
  position:absolute;
  inset:0;
  border-right:3px solid #ffffff;
  border-bottom:3px solid #ffffff;
  transform:rotate(45deg);
  transform-origin:center;
  transition:border-color .18s ease;
}

/* direction modifiers */
.section-scroll-icon-down::before{ transform:rotate(45deg); }
.section-scroll-icon-up::before{ transform:rotate(-135deg); }

/* hover: arrow turns dark grey */
.section-scroll-btn:hover .section-scroll-icon::before{
  border-right-color:#333333;
  border-bottom-color:#333333;
}

/* ===============================
   MOBILE – fixed to viewport, only when text collapsed
   =============================== */
@media (max-width:768px){
  /* Base: hidden on mobile */
  .section-scroll-btn{
    position:fixed;
    top:auto;
    left:50%;
    bottom:100px;
    transform:translateX(-50%);
    z-index:999;
    display:none;
  }

  /* Show for Cine/Prod/Comm when text is collapsed */
  section.text-collapsed .section-scroll-btn{
    display:flex;
  }
}

@media (max-width:768px){
  #commercial .section-scroll-btn{
    bottom:40px;
  }
}

@media (max-width:768px){
  /* ✅ Always show Contact → Home circle on mobile */
  #contact-section .section-scroll-btn{
    display:flex;
    bottom:clamp(48px,10vh,96px);
  }
}

@media (max-width:768px){
  #production .section-scroll-btn{
    bottom:200px;
  }
}

@media (max-width:768px){
  #cinematography-section .section-scroll-btn{
    bottom:140px;
  }
}

/* ===============================
   SECTION COLORS + WAVES
   =============================== */
#cinematography-section{
  background:#f2f2f2;
  position:relative;
  overflow:visible;
  cursor:pointer;
  padding-bottom:clamp(160px,24vh,260px);
  z-index:0;
}

#cinematography-section::before{
  content:"";
  position:absolute;
  left:0;
  top:-140px;
  width:100%;
  height:clamp(140px,20vw,220px);
  background-repeat:no-repeat;
  background-size:cover;
  background-position:bottom center;
  pointer-events:none;
  z-index:20;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2600 220'>\
<g transform='scale(1,-1) translate(0,-220)'>\
<path fill='%23ffffff' d='M0,80 C260,40 540,10 860,40 C1160,70 1420,140 1740,150 C2040,160 2320,130 2600,90 L2600,220 L0,220 Z'/>\
</g>\
</svg>");
}

#production{
  background:#e0e0e0;
  position:relative;
  overflow:visible;
  cursor:pointer;
  padding-bottom:clamp(160px,24vh,260px);
}
#production::before{
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2600 220'>\
<path fill='%23f2f2f2' d='M0,0 C320,50 680,120 1020,100 C1350,80 1700,130 2060,90 C2400,50 2560,60 2600,80 L2600,0 Z'/>\
</svg>");
}

#commercial{
  background:#cccccc;
  position:relative;
  overflow:visible;
  cursor:pointer;
  z-index:2;
}

#commercial::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:clamp(100px,18vw,180px);
  background-repeat:no-repeat;
  background-size:cover;
  background-position:bottom center;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2400 200'>\
<path fill='%23e0e0e0' d='M0,0 C300,40 600,70 900,90 C1200,120 1600,150 2000,110 C2200,90 2300,100 2400,120 L2400,0 Z'/>\
</svg>");
  z-index:0;
}

/* CONTACT SECTION */
#contact-section{
  background:#c4c4c4;
  position:relative;
  overflow:visible;
  cursor:default;
  display:none;
  padding-bottom:clamp(160px,24vh,260px);
  z-index:1;
}

#contact-section::before{
  content:"";
  position:absolute;
  left:0;
  top:-40px;
  width:100%;
  height:calc(clamp(100px,18vw,180px) + 80px);
  background-repeat:no-repeat;
  background-size:cover;
  background-position:bottom center;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2600 220'>\
<path fill='%23cccccc' d='M0,0 C320,60 720,130 1120,110 C1480,90 1880,120 2200,90 C2440,70 2540,80 2600,90 L2600,0 Z'/>\
</svg>");
  z-index:-1;
}

#contact-section.is-expanded{
  display:flex;
}

/* ===============================
   LAYOUTS
   =============================== */
.cinema-layout,
.production-layout{
  position:relative;
  z-index:2;
  display:flex;
  align-items:flex-start;
  gap:48px;
  width:min(92vw,1200px);
  margin-inline:auto;
}
.production-layout{flex-direction:row-reverse;}

.contact-layout{
  position:relative;
  z-index:2;
  width:min(92vw,1200px);
  margin-inline:auto;
  display:flex;
  justify-content:center;
  align-items:flex-start;
}

.cinema-player,
.production-player{
  width:clamp(500px,56vw,630px);
  aspect-ratio:16/9;
  position:relative;
  overflow:hidden;
  border-radius:10px;
  background:#000;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
  z-index:2;
}

.production-player{width:clamp(540px,56vw,630px);}

.cinema-item,
.production-item{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .4s linear;
}
.cinema-item.active,
.production-item.active{
  opacity:1;
  z-index:1;
}
.cinema-item video,
.production-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  cursor:pointer;
  border-radius:inherit;
}

/* CONTACT BOX */
.contact-box{
  position:relative;
  max-width:520px;
  padding:40px 34px 60px;
  background:transparent;
  border-radius:0;
  box-shadow:none;
  font-size:1rem;
  line-height:1.7;
  color:#111827;
  text-align:right;
  font-style:italic;
  z-index:1;
}
.contact-box::before{
  content:"";
  position:absolute;
  transform:scale(1.3);
  inset:-40px -60px -54px -60px;
  background:url("../shape4.png") center / contain no-repeat;
  box-shadow:none;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.18));
  z-index:-1;
}

.contact-box h2{
  margin-bottom:18px;
  margin-right:50px;
  font-size:1.35rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-align:right;
  color:darkgrey;
}

.contact-box p{ margin-bottom:16px; }

.contact-box a{
  color:#111827;
  text-decoration:none;
  font-weight:550;
  position:relative;
}

.contact-box a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-0.08em;
  width:100%;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .25s ease;
}

.contact-box a:hover{ color:#ff5a1f; }
.contact-box a:hover::after{ transform:scaleX(1); }

/* CONTACT ICON LINKS */
.contact-icons{
  display:flex;
  justify-content:right;
  align-items:center;
  gap:48px;
  margin-bottom:16px;
  margin-right:50px;
}
.contact-icons a{ display:inline-flex; align-items:center; justify-content:center; }
.contact-icons a::after{display:none;}

.contact-icons img{
  width:46px;
  height:46px;
  display:block;
  filter:grayscale(1) brightness(1.3) contrast(0.9);
  opacity:0.85;
  transition:transform .25s ease, opacity .25s ease, filter .25s ease;
}
.contact-icons a:hover img{
  transform:scale(1.12);
  opacity:1;
  filter:grayscale(1) brightness(1.5) contrast(1);
}

/* ===============================
   SHAPE PANELS
   =============================== */
.shape-panel{
  position:absolute;
  top:80%;
  transform:translateY(-50%);
  width:100vw;
  max-width:100vw;
  min-height:75vh;
  padding:100px 120px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  display:flex;
  align-items:center;
  pointer-events:none;
  z-index:1;
}

#cinematography-section .shape-panel{
  background-image:url("../shape1.png");
  top:20vh;
  transform:translate(30vw,-50%);
}
#production .shape-panel{
  background-image:url("../shape2.png");
  left:0;
  right:auto;
  top:20vh;
  transform:translate(-30vw,-50%);
  z-index:1;
}
#commercial .shape-panel{
  background-image:url("../shape3.png");
  right:0;
  top:20vh;
  transform:translate(30vw,-50%);
  z-index:0;
}

/* ===============================
   TEXT UNDER CAROUSELS
   =============================== */
.under-carousel-text{
  max-width:calc(var(--text-base,500px) * var(--text-scale));
  margin-top:clamp(48px,8vh,120px);
  padding:30px;
  position:relative;
  z-index:3;
  font-size:1rem;
  line-height:1.6;
  font-weight:normal;
  font-style:normal;
  color:#111827;
  text-align:justify;
  transform:translate(var(--nudge-x,0px),var(--nudge-y,0px));
}
.under-carousel-text p{
  margin-bottom:16px;
  text-align-last:left;
  -webkit-text-align-last:left;
}

#cinematography-section .under-carousel-text,
#production .under-carousel-text,
#commercial .under-carousel-text{--text-base:520px;}
#commercial .under-carousel-text{margin-top:-40px;}

@media (min-width:901px){
  .cinema-layout .under-carousel-text{
    transform:translateX(clamp(32px,-6vw,-2px));
  }
  .production-layout .under-carousel-text{
    transform:translateX(clamp(2px,6vw,-72px));
  }
}

.italic-right{font-style:oblique 10deg;font-variation-settings:"slnt" -6;}
.italic-left{font-style:oblique 10deg;font-variation-settings:"slnt" -10;}

/* ===============================
   READ MORE / SHOW LESS LINKS
   =============================== */
.more-toggle,
.read-more-link{
  appearance:none;
  -webkit-appearance:none;
  background:none;
  border:0;
  padding:0;
  margin-left:.35em;
  font:inherit;
  font-style:italic;
  font-weight:550;
  color:#111827;
  cursor:pointer;
  text-decoration:none;
  position:relative;
}

.more-toggle::after,
.read-more-link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-0.08em;
  width:100%;

  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .28s ease;
}

.more-toggle.home-less::after,
.more-toggle.section-less::after{
  transform-origin:right center;
}

.more-toggle:hover,
.read-more-link:hover,
.home-work-link:hover{
  color:#ff5a1f;
}

.more-toggle:hover::after,
.read-more-link:hover::after{ transform:scaleX(1); }

.under-carousel-text.is-collapsed p:not(:first-child){display:none;}

/* ===============================
   HOME MOBILE SNIPPET (kept styles, but JS disables it)
   =============================== */
.home-snippet-mobile{
  width:100%;
  max-width:var(--hero-carousel-width);
  margin:16px auto 32px;
  font-size:1rem;
  line-height:1.6;
  color:#111827;
  text-align:justify;
}
.home-snippet-mobile .home-snippet-text{
  text-align:justify;
  text-align-last:left;
  -webkit-text-align-last:left;
}
.home-snippet-mobile .home-more{
  display:block;
  width:fit-content;
  margin:22px auto 0;
}

/* ===============================
   MENU
   =============================== */
.menu-banner{
  position:fixed;
  top:0;right:0;
  width:300px;
  height:100%;
  background:#f3f3f3;
  z-index:3000;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:64px 34px 70px;
  transform:translateX(110%);
  transition:transform .36s cubic-bezier(.2,.9,.2,1);
  box-shadow:-6px 0 30px rgba(0,0,0,0.06);
  contain:layout paint;
}
.menu-banner.active{transform:translateX(0);}

.menu-section{
  margin-top:40px;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.menu-section a{
  text-decoration:none;
  color:#000;
  padding:8px 0;
  font-size:1.06rem;
  font-weight:600;
  text-transform:uppercase;
}
.menu-section a:hover{color:#ff5a1f;}

/* 🌐 LANGUAGE BUBBLES */
.menu-langs{
  margin-top:50px;
  margin-bottom:24px;
  font-weight:600;
  font-size:.95rem;
}

.lang-title{
  text-align:right;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.8rem;
  color:#555;
  margin-bottom:12px;
  cursor:pointer;
  transition: color .25s ease;
}

.lang-title:hover{
  color:#ff5a1f;
}

/* Keep orange when bubbles are open */
.lang-wrapper.open .lang-title{
  color:#ff5a1f;
}

.lang-bubbles{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-end;
}

.lang-bubble{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:48px;
  height:32px;
  padding:0 10px;
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  text-decoration:none;
  color:#111827;
  cursor:pointer;
  z-index:1;
}

.lang-bubble::before{
  content:"";
  position:absolute;
  inset:0;
  transform:scale(1.05);
  background:url("../shape2.png") center/contain no-repeat;
  z-index:-1;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.18));
}

.lang-bubble:hover{
  color:#ff5a1f;
}

.lang-bubble.active{
  font-weight:700;
}

/* CONTACT BLOCK IN MENU */
.menu-contact{
  font-weight:bold;
  font-size:.95rem;
  color:#111;
  line-height:1.45;
  width:100%;
  padding-bottom:30px;
  padding-top:30px;

  transform: translateY(-50px);

  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;

  transition: transform .25s ease;
}

/* when bubbles are expanded, let the contact block be pushed down */
.menu-banner.lang-bubbles-open .menu-contact{
  transform: translateY(0);
}

@media (max-width:768px){
  .menu-contact{
    transform:none;
  }

  .menu-banner.lang-bubbles-open .menu-contact{
    transform:none;
    margin-top:16px;
  }
}

.menu-contact .email a{color:#000;text-decoration:none;font-weight:bold;}
.menu-contact .whatsapp{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:8px;
}

.menu-contact img{
  width:60px;
  height:60px;
  display:block;
  filter:grayscale(1) brightness(2.2);
  opacity:0.95;
  transition:transform .25s ease, opacity .25s ease, filter .25s ease;
}
.menu-contact .whatsapp:hover img{
  transform:scale(1.08);
  opacity:1;
  filter:grayscale(1) brightness(0.5);
}

/* Burger */
.burger{
  position:fixed;
  top:20px;right:20px;
  width:36px;
  height:24px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:center;
  z-index:3100;
  background:none;
  border:0;
  cursor:pointer;
  contain:paint;
}
.burger .bar{
  width:24px;
  height:4px;
  border-radius:3px;
  transition:transform .28s ease, opacity .28s ease;
  background:#fff;
}
.burger.open .bar:nth-child(1){transform:translateY(8px) rotate(45deg);}
.burger.open .bar:nth-child(2){opacity:0;}
.burger.open .bar:nth-child(3){transform:translateY(-8px) rotate(-45deg);}
.burger.open .bar{background:#ff5a1f;}
.burger.hidden{opacity:0;pointer-events:none;}

/* ===============================
   OVERLAY
   =============================== */
.video-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.95);
  justify-content:center;
  align-items:center;
  z-index:5000;
  opacity:0;
  transition:opacity .22s ease-out;
}
.video-overlay.active{
  display:flex;
  opacity:1;
}
.video-overlay video,
.video-overlay img{
  width:85vw;
  height:85vh;
  object-fit:contain;
  background:#000;
}
.video-overlay .arrow{opacity:1;}

.close-video{
  position:absolute;
  top:20px;
  right:30px;
  font-size:32px;
  color:#fff;
  background:none;
  border:none;
  cursor:pointer;
}

body.overlay-open{overflow:hidden;}
body.overlay-open #home-section,
body.overlay-open #cinematography-section,
body.overlay-open #production,
body.overlay-open #commercial,
body.overlay-open .menu-banner,
body.overlay-open .burger{pointer-events:none;}
body.overlay-open #overlay,
body.overlay-open #overlay *{pointer-events:auto;}

/* ===============================
   CONTACT BUBBLE
   =============================== */
.contact-bubble{
  position:absolute;
  bottom:-6px;
  right:0;
  padding:0;
  margin:0;
  opacity:0;
  pointer-events:none;
  z-index:35;
}
.contact-bubble.is-visible{
  opacity:1;
  pointer-events:auto;
}

.contact-bubble-btn{
  position:relative;
  border:0;
  padding:0;
  background:transparent;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2;
  transform-origin:bottom right;
  opacity:0;
  text-decoration:none;
  width:72px;
  height:56px;
  transition:
    transform 150ms ease-out,
    box-shadow 150ms ease-out,
    opacity 120ms ease-out;
}

.contact-bubble-btn:hover{
  transform:translateY(-1px) scale(1.02);
}

.contact-bubble-btn:active{
  transform:translateY(1px) scale(0.97);
  opacity:0.9;
}

.contact-bubble-icon{
  width:32px;
  height:32px;
  display:block;
  pointer-events:none;
  filter:grayscale(1) brightness(2.2);
  opacity:0.95;
  transition:transform .25s ease, opacity .25s ease, filter .25s ease;
}
.contact-bubble-btn:hover .contact-bubble-icon{
  transform:scale(1.08);
  opacity:1;
  filter:grayscale(1) brightness(0.5);
}

.contact-bubble-btn::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:190px;
  aspect-ratio:4 / 3;
  transform:translate(-50%,-50%);
  background:url("../shape2.png") center/contain no-repeat;
  opacity:0.98;
  z-index:-1;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.25));
}

.contact-bubble.is-visible .contact-bubble-btn{
  animation:
    contactBubbleEnter .55s cubic-bezier(.21, .9, .24, 1.1) forwards,
    contactBubbleFloat 3.6s ease-in-out .55s infinite alternate;
}

@keyframes contactBubbleEnter{
  from{ opacity:0; transform:translate(40px, 28px) scale(.82); }
  to{ opacity:1; transform:translate(0, 0) scale(1); }
}
@keyframes contactBubbleFloat{
  from{ transform:translate(0, 0) scale(1); }
  to{ transform:translate(-6px, -10px) scale(1.03); }
}

/* ===============================
   BOTTOM BANNER
   =============================== */
.bottom-banner{
  width:100%;
  background:#ffb964;
  color:#fff;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-around;
  align-items:flex-start;
  padding:40px 20px 32px;
  font-size:14px;
  line-height:1.6;
  position:relative;
}
.banner-block{max-width:30%;text-align:center;}
.bottom-banner .copyright{
  display:block;
  width:100%;
  margin-top:32px;
  text-align:center;
  font-size:.85rem;
  letter-spacing:.08em;
  opacity:.8;
}

.bottom-banner::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-2px;
  height:4px;
  background:rgba(255,100,50,.9);
  pointer-events:none;
  z-index:-1;
}

/* ===============================
   GLOBAL PAUSE
   =============================== */
html.paused *,
html.paused *::before,
html.paused *::after{
  animation-play-state:paused !important;
  transition:none !important;
}

/* ===============================
   RESPONSIVE
   =============================== */
@media (max-width:900px){
  .cinema-layout,
  .production-layout,
  .contact-layout{
    flex-direction:column;
    align-items:center;
  }

  .cinema-player,
  .production-player{
    width:100%;
    max-width:640px;
  }

  .under-carousel-text{
    transform:none;
    margin-inline:auto;
  }

  .contact-box{
    width:100%;
    max-width:640px;
  }
}

@media (max-width:768px){
  section:not(#home-section)::before{
    top:-2px;
    height:calc(clamp(100px,18vw,180px) + 4px);
  }

  section:not(#home-section){ padding-top:120px; }

  :root{
    --hero-carousel-width:100%;
    --hero-carousel-offset-top:0px;
    --hero-carousel-offset-bottom:24px;
  }

  #home-section{overflow-x:hidden;}

  body.home-text-active,
  html.home-text-active{
    overflow:hidden;
    height:100%;
  }

  #home-text-section{
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width:100vw;
    height:100vh;
    z-index:50;
    padding:8vh 16px 10vh;
    align-items:flex-start;
    justify-content:flex-start;
    overflow-y:auto;
    background:transparent;
  }

  #home-text-section .content-block{
    font-size:1.05rem;
    line-height:1.5;
  }

  #logoBox{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:min(72vw, 360px);
    height:min(26vh, 180px);
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
    z-index:30;
    opacity:1;
    transition:opacity .3s ease;
  }

  #cineText p:first-child,
  #prodText p:first-child,
  #commText p:first-child{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    text-align:justify;
    text-align-last:left;
    -webkit-text-align-last:left;
  }

  #cineText.is-collapsed p:first-child{
    transform: translateY(-50px);
  }

  #prodText.is-collapsed p:first-child{
    transform: translateY(-100px);
  }

  #commText.is-collapsed p:first-child{
    transform: translateY(-10px);
  }
  
  /* CINEMATOGRAPHY – lift "Continue reading..." when collapsed */
  #cineText.is-collapsed .section-more-wrap{
    transform: translateY(-40px);
  }

  /* PRODUCTION – lift "Continue reading..." when collapsed */
  #prodText.is-collapsed .section-more-wrap{
    transform: translateY(-80px);
  }

  /* COMMERCIAL – lift "Continue reading..." when collapsed */
  #commText.is-collapsed .section-more-wrap{
    transform: translateY(-20px);
  }

  /* Align "Continue reading…" to the right on mobile only */
  .section-more-wrap{
    display:flex;
    justify-content:flex-end;
  }
  
  /* When expanded, reset the first paragraph position */
  #cineText:not(.is-collapsed) p:first-child,
  #prodText:not(.is-collapsed) p:first-child{
    transform:none;
  }
  
  /* CINEMATOGRAPHY – center expanded text vertically a bit more */
  #cineText:not(.is-collapsed){
    transform: translateY(50px);
  }

  /* PRODUCTION – slightly more space */
  #prodText:not(.is-collapsed){
    transform: translateY(50px);
  }


  .close-video{
    position:fixed;
    top:16px;right:16px;
    z-index:10001;
    pointer-events:auto;
  }

  .bottom-banner{
    justify-content:center;
    text-align:center;
  }
  .bottom-banner .banner-block:nth-child(2),
  .bottom-banner .banner-block:nth-child(3){ display:none; }
  .bottom-banner .banner-block{ max-width:100%; }

  .contact-bubble{
    bottom:12px;
    right:10px;
  }
  .contact-bubble-btn::before{
    width:140px;
  }

  #cinematography-section .shape-panel{
    top:70vh;
    transform:translate(30vw,-50%);
  }
  #production .shape-panel{
    top:70vh;
    left:0;
    right:auto;
    transform:translate(-30vw,-50%);
  }
  #commercial .shape-panel{
    top:50vh;
    right:0;
    transform:translate(30vw,-50%);
  }

  .home-logo-right{
    display:none;
  }

  .menu-banner{
    width:100%;
    left:0;
    right:0;
    max-width:none;
    padding:80px 24px 40px;
  }

  .menu-section{
    align-items:center;
    text-align:center;
  }

  .menu-langs{
    text-align:center;
  }

  .menu-contact{
    text-align:center;
  }

  .home-work-link{
    padding-bottom:12px;
  }

  .home-work-link::before{
    content:"";
    position:absolute;
    left:50%;
    bottom:0;
    transform:translateX(-50%);
    width:0;
    height:0;
    border-left:9px solid transparent;
    border-right:9px solid transparent;
    border-top:10px solid currentColor;
    opacity:0.85;
  }

  /* Center language bubbles on mobile */
  .lang-bubbles{
    justify-content:center;
  }
}

@media (min-width:769px){
  #commText .contact-bubble{
    bottom:-42px;
    z-index:999;
  }

  #home-text-section .content-block p{
    opacity:0;
    transform:translateX(0);
    transition:opacity .6s ease, transform .6s ease;
  }

  #home-text-section .content-block p:nth-child(1),
  #home-text-section .content-block p:nth-child(3){
    transform:translateX(-60px);
  }

  #home-text-section .content-block p:nth-child(2),
  #home-text-section .content-block p:nth-child(4){
    transform:translateX(60px);
  }

  #home-text-section .content-block p:nth-child(1){transition-delay:0s;}
  #home-text-section .content-block p:nth-child(2){transition-delay:.08s;}
  #home-text-section .content-block p:nth-child(3){transition-delay:.16s;}
  #home-text-section .content-block p:nth-child(4){transition-delay:.24s;}

  #home-text-section.home-overlay-visible .content-block p{
    opacity:1;
    transform:translateX(0);
  }
}

/* ===============================
   ACCESSIBLE FOCUS STATES
   =============================== */
.contact-bubble-btn:focus-visible,
.section-scroll-btn:focus-visible,
.home-work-link:focus-visible,
.burger:focus-visible,
.menu-section a:focus-visible,
.lang-bubble:focus-visible{
  outline:2px solid rgba(255,100,50,0.9);
  outline-offset:3px;
}

/* ===============================
   REDUCED MOTION
   =============================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;}
}