/* CASA & COR — cinematic opening v1 */
:root{
  --cc-cyan:#08c9d8;
  --cc-yellow:#f2bd26;
  --cc-red:#c8191f;
  --cc-brown:#8c6648;
  --cc-ink:#172532;
}

.cc-cinema{display:none}
html.cc-splash-pending{overflow:hidden}
html.cc-splash-pending body{overflow:hidden}
html.cc-splash-pending .site-header,
html.cc-splash-pending main,
html.cc-splash-pending .site-footer,
html.cc-splash-pending .floating-whatsapp,
html.cc-splash-pending .toast{visibility:hidden}
html.cc-splash-pending.cc-splash-reveal-home .site-header,
html.cc-splash-pending.cc-splash-reveal-home main,
html.cc-splash-pending.cc-splash-reveal-home .site-footer,
html.cc-splash-pending.cc-splash-reveal-home .floating-whatsapp,
html.cc-splash-pending.cc-splash-reveal-home .toast{visibility:visible}
html.cc-splash-pending .cc-cinema{display:block;visibility:visible}

.cc-cinema{
  position:fixed;
  z-index:10000;
  inset:0;
  pointer-events:none;
  font-family:var(--font-body,Manrope,system-ui,sans-serif);
}

.cc-splash-scene{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 38%,rgba(255,255,255,.96),rgba(248,247,242,.96) 52%,#f4f2eb 100%),
    #faf9f5;
  transform:translateZ(0);
  will-change:clip-path,transform;
}

.cc-splash-scene::before{
  content:"";
  position:absolute;
  inset:-12%;
  opacity:.34;
  background:
    linear-gradient(90deg,transparent 49.8%,rgba(16,41,66,.05) 50%,transparent 50.2%),
    linear-gradient(transparent 49.8%,rgba(16,41,66,.04) 50%,transparent 50.2%);
  background-size:84px 84px;
  mask-image:radial-gradient(circle at center,#000 0 35%,transparent 74%);
}

.cc-architecture{
  position:absolute;
  z-index:1;
  width:min(92vw,1120px);
  height:min(74vh,720px);
  left:50%;top:50%;
  transform:translate(-50%,-48%) perspective(1000px) rotateX(63deg);
  transform-origin:center bottom;
  opacity:.48;
}
.cc-architecture i{position:absolute;display:block;background:linear-gradient(90deg,transparent,rgba(16,41,66,.2),transparent);transform-origin:center;opacity:0}
.cc-architecture i:nth-child(1){left:6%;right:6%;top:12%;height:1px;transform:scaleX(.05)}
.cc-architecture i:nth-child(2){left:12%;right:12%;top:35%;height:1px;transform:scaleX(.05)}
.cc-architecture i:nth-child(3){top:8%;bottom:3%;left:25%;width:1px;background:linear-gradient(transparent,rgba(0,191,212,.24),transparent);transform:scaleY(.05)}
.cc-architecture i:nth-child(4){top:8%;bottom:3%;right:25%;width:1px;background:linear-gradient(transparent,rgba(246,195,19,.24),transparent);transform:scaleY(.05)}
.cc-cinema.is-playing .cc-architecture i:nth-child(1){animation:ccLineX .65s .08s ease-out forwards}
.cc-cinema.is-playing .cc-architecture i:nth-child(2){animation:ccLineX .7s .22s ease-out forwards}
.cc-cinema.is-playing .cc-architecture i:nth-child(3){animation:ccLineY .72s .1s ease-out forwards}
.cc-cinema.is-playing .cc-architecture i:nth-child(4){animation:ccLineY .72s .18s ease-out forwards}
@keyframes ccLineX{to{opacity:1;transform:scaleX(1)}}
@keyframes ccLineY{to{opacity:1;transform:scaleY(1)}}

.cc-logo-wrap{
  position:relative;
  z-index:4;
  width:min(72vmin,610px);
  aspect-ratio:1;
  margin-top:-4vh;
  transform:translateZ(0);
}
.cc-logo-layer{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  object-fit:contain;
  opacity:0;
  user-select:none;
  -webkit-user-drag:none;
  will-change:transform,opacity,clip-path,filter;
}
.cc-panel-cyan{clip-path:inset(100% 0 0 0);transform:perspective(900px) rotateY(-14deg) translateX(-3%) scale(.98);filter:drop-shadow(0 16px 24px rgba(0,191,212,.12))}
.cc-panel-yellow{clip-path:inset(100% 0 0 0);transform:perspective(900px) rotateY(10deg) translateY(2%) scale(.98);filter:drop-shadow(0 18px 26px rgba(246,195,19,.12))}
.cc-panel-red{clip-path:inset(100% 0 0 0);transform:perspective(900px) rotateY(14deg) translateX(3%) scale(.98);filter:drop-shadow(0 16px 24px rgba(225,38,28,.12))}
.cc-cinema.is-playing .cc-panel-cyan{animation:ccPanelCyan .72s .82s cubic-bezier(.18,.78,.25,1) forwards}
.cc-cinema.is-playing .cc-panel-yellow{animation:ccPanelYellow .72s 1.52s cubic-bezier(.18,.78,.25,1) forwards}
.cc-cinema.is-playing .cc-panel-red{animation:ccPanelRed .72s 2.22s cubic-bezier(.18,.78,.25,1) forwards}
@keyframes ccPanelCyan{0%{opacity:0;clip-path:inset(100% 0 0 0)}20%{opacity:1}100%{opacity:1;clip-path:inset(0);transform:none;filter:drop-shadow(0 10px 18px rgba(0,191,212,.08))}}
@keyframes ccPanelYellow{0%{opacity:0;clip-path:inset(100% 0 0 0)}20%{opacity:1}100%{opacity:1;clip-path:inset(0);transform:none;filter:drop-shadow(0 10px 18px rgba(246,195,19,.08))}}
@keyframes ccPanelRed{0%{opacity:0;clip-path:inset(100% 0 0 0)}20%{opacity:1}100%{opacity:1;clip-path:inset(0);transform:none;filter:drop-shadow(0 10px 18px rgba(225,38,28,.08))}}

.cc-brush-stroke{clip-path:inset(0 100% 0 0);opacity:0}
.cc-cinema.is-playing .cc-brush-stroke{animation:ccStroke .92s 3.52s cubic-bezier(.33,.03,.15,1) forwards}
@keyframes ccStroke{0%{opacity:1;clip-path:inset(0 100% 0 0)}100%{opacity:1;clip-path:inset(0)}}

.cc-brush-runner{opacity:0;transform:translate(25%,-18%) scale(1.26) rotate(-7deg);filter:drop-shadow(0 22px 22px rgba(68,42,25,.18))}
.cc-cinema.is-playing .cc-brush-runner{animation:ccBrushRunner 1.72s 2.88s cubic-bezier(.2,.64,.28,1) forwards}
@keyframes ccBrushRunner{
  0%{opacity:0;transform:translate(28%,-20%) scale(1.35) rotate(-9deg)}
  12%{opacity:1}
  38%{opacity:1;transform:translate(-50%,33%) scale(1.08) rotate(-22deg)}
  67%{opacity:1;transform:translate(-22%,27%) scale(1.03) rotate(-8deg)}
  100%{opacity:1;transform:none}
}

.cc-arc{opacity:0;transform:scaleX(.03);transform-origin:50% 72%}
.cc-cinema.is-playing .cc-arc{animation:ccArc .58s 4.5s cubic-bezier(.2,.75,.2,1) forwards}
@keyframes ccArc{0%{opacity:1;transform:scaleX(.03)}100%{opacity:1;transform:scaleX(1)}}

.cc-wordmark{opacity:0;clip-path:inset(0 100% 0 0)}
.cc-cinema.is-playing .cc-wordmark{animation:ccWord .52s 5.04s ease-out forwards}
@keyframes ccWord{to{opacity:1;clip-path:inset(0)}}

.cc-official-logo{opacity:0;transform:scale(.992);filter:drop-shadow(0 16px 28px rgba(16,41,66,.06))}
.cc-cinema.is-playing .cc-official-logo{animation:ccOfficial .38s 5.22s ease-out forwards}
@keyframes ccOfficial{to{opacity:1;transform:scale(1)}}

.cc-logo-shine{
  position:absolute;
  z-index:12;
  inset:8% 14% 15%;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
  mask-image:linear-gradient(#000,transparent 88%);
}
.cc-logo-shine::after{
  content:"";
  position:absolute;
  top:-20%;left:-45%;
  width:26%;height:140%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-18deg);
}
.cc-cinema.is-playing .cc-logo-shine{animation:ccShineShow .65s 5.55s ease forwards}
.cc-cinema.is-playing .cc-logo-shine::after{animation:ccShine 1.05s 5.55s ease-out forwards}
@keyframes ccShineShow{0%,100%{opacity:0}25%,72%{opacity:.8}}
@keyframes ccShine{to{left:120%}}

.cc-splash-copy{
  position:absolute;
  z-index:6;
  left:50%;
  bottom:max(28px,4vh);
  width:min(92vw,700px);
  text-align:center;
  transform:translateX(-50%);
  color:#667481;
  opacity:0;
}
.cc-splash-copy strong{display:block;color:#26394a;font-size:clamp(.9rem,1.4vw,1.06rem);font-weight:800;letter-spacing:.01em}
.cc-splash-copy small{display:block;margin-top:5px;font-size:clamp(.65rem,1vw,.74rem);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#7f8c95}
.cc-cinema.is-playing .cc-splash-copy{animation:ccCopy .5s 5.45s ease-out forwards}
@keyframes ccCopy{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}

.cc-finish-pulse{
  position:absolute;
  z-index:3;
  left:50%;top:50%;
  width:min(58vmin,500px);height:min(58vmin,500px);
  border-radius:50%;
  border:1px solid rgba(0,191,212,.22);
  opacity:0;
  transform:translate(-50%,-50%) scale(.75);
}
.cc-cinema.is-playing .cc-finish-pulse{animation:ccPulse .6s 5.18s ease-out forwards}
@keyframes ccPulse{0%{opacity:.75;transform:translate(-50%,-50%) scale(.72)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.18)}}

.cc-transition-brush{
  position:absolute;
  z-index:10003;
  left:-28vw;
  top:50%;
  width:clamp(120px,13vw,210px);
  opacity:0;
  transform:translateY(-50%) rotate(8deg) scale(1.12);
  filter:drop-shadow(0 18px 28px rgba(62,41,27,.18));
  will-change:transform,opacity;
}
.cc-transition-edge{
  position:absolute;
  z-index:10002;
  top:0;bottom:0;
  left:-8vw;
  width:13vw;
  opacity:0;
  background:linear-gradient(90deg,rgba(128,85,55,.0),rgba(142,98,66,.38),rgba(255,255,255,.12));
  filter:blur(8px);
  will-change:transform,opacity;
}
.cc-cinema.is-exiting .cc-transition-brush{animation:ccTransitionBrush .9s cubic-bezier(.2,.72,.18,1) forwards}
.cc-cinema.is-exiting .cc-transition-edge{animation:ccTransitionEdge .9s cubic-bezier(.2,.72,.18,1) forwards}
.cc-cinema.is-exiting .cc-splash-scene{animation:ccSceneWipe .9s cubic-bezier(.2,.72,.18,1) forwards}
@keyframes ccTransitionBrush{0%{opacity:1;transform:translate(0,-50%) rotate(9deg) scale(1.18)}100%{opacity:1;transform:translate(138vw,-52%) rotate(2deg) scale(1.05)}}
@keyframes ccTransitionEdge{0%{opacity:.8;transform:translateX(0)}100%{opacity:.15;transform:translateX(116vw)}}
@keyframes ccSceneWipe{0%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 0 100%)}}

html.cc-home-enter .site-header{animation:ccHomeHeader .55s ease-out both}
html.cc-home-enter .hero .hero-copy{animation:ccHomeCopy .62s .06s cubic-bezier(.2,.75,.2,1) both}
html.cc-home-enter .hero .hero-carousel-shell{animation:ccHomeHero .68s cubic-bezier(.2,.75,.2,1) both}
@keyframes ccHomeHeader{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
@keyframes ccHomeCopy{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes ccHomeHero{from{opacity:0;transform:scale(1.025)}to{opacity:1;transform:none}}

/* Reduced motion: clear background → official mark → home */
.cc-cinema.is-reduced .cc-architecture,
.cc-cinema.is-reduced .cc-logo-layer:not(.cc-official-logo),
.cc-cinema.is-reduced .cc-logo-shine,
.cc-cinema.is-reduced .cc-finish-pulse,
.cc-cinema.is-reduced .cc-splash-copy{display:none}
.cc-cinema.is-reduced .cc-official-logo{opacity:1;transform:none;animation:ccReducedLogo .75s ease-out both}
@keyframes ccReducedLogo{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.cc-cinema.is-reduced.is-exiting .cc-splash-scene{animation:ccReducedExit .3s ease forwards}
@keyframes ccReducedExit{to{opacity:0}}

@media (max-width:700px){
  .cc-logo-wrap{width:min(88vw,440px);margin-top:-7vh}
  .cc-splash-copy{bottom:max(24px,5vh);padding-inline:16px}
  .cc-splash-copy strong{font-size:.82rem}
  .cc-splash-copy small{font-size:.6rem;letter-spacing:.08em}
  .cc-architecture{width:118vw;height:70vh;opacity:.34}
  .cc-transition-brush{width:130px;left:-42vw}
  @keyframes ccTransitionBrush{0%{opacity:1;transform:translate(0,-50%) rotate(9deg) scale(1.16)}100%{opacity:1;transform:translate(172vw,-52%) rotate(2deg) scale(1.03)}}
}

@media (max-width:390px){
  .cc-logo-wrap{width:94vw;margin-top:-8vh}
  .cc-splash-copy small{display:none}
}

/* Continuous architectural wall underlays: visible before the brush reaches the logo. */
.cc-wall{position:absolute;z-index:-1;display:block;opacity:0;will-change:clip-path,transform,opacity;box-shadow:0 18px 28px rgba(16,41,66,.06)}
.cc-wall-cyan{left:29.2%;top:17.8%;width:12.9%;height:56.6%;background:linear-gradient(160deg,#09c9d9 0 48%,#71e6ef 73%,#09c9d9 100%);clip-path:polygon(100% 0,100% 100%,0 100%,0 14%);transform:perspective(900px) rotateY(-14deg) translateX(-4%) scale(.98)}
.cc-wall-yellow{left:43.05%;top:5.4%;width:17%;height:65.4%;background:linear-gradient(168deg,#ffbd2a 0 45%,#ffe71d 74%,#e8a92d 100%);clip-path:polygon(0 0,100% 11%,100% 100%,0 100%);transform:perspective(900px) rotateY(10deg) translateY(2%) scale(.98)}
.cc-wall-red{left:57.95%;top:17.55%;width:12.8%;height:56.4%;background:linear-gradient(160deg,#bd151b 0 48%,#ed1724 73%,#bd151b 100%);clip-path:polygon(0 0,100% 14%,100% 100%,0 100%);transform:perspective(900px) rotateY(14deg) translateX(4%) scale(.98)}
.cc-cinema.is-playing .cc-wall-cyan{animation:ccWallCyan .72s .82s cubic-bezier(.18,.78,.25,1) forwards}
.cc-cinema.is-playing .cc-wall-yellow{animation:ccWallYellow .72s 1.52s cubic-bezier(.18,.78,.25,1) forwards}
.cc-cinema.is-playing .cc-wall-red{animation:ccWallRed .72s 2.22s cubic-bezier(.18,.78,.25,1) forwards}
@keyframes ccWallCyan{0%{opacity:0;clip-path:polygon(100% 100%,100% 100%,0 100%,0 100%)}25%{opacity:1}100%{opacity:1;clip-path:polygon(100% 0,100% 100%,0 100%,0 14%);transform:none}}
@keyframes ccWallYellow{0%{opacity:0;clip-path:polygon(0 100%,100% 100%,100% 100%,0 100%)}25%{opacity:1}100%{opacity:1;clip-path:polygon(0 0,100% 11%,100% 100%,0 100%);transform:none}}
@keyframes ccWallRed{0%{opacity:0;clip-path:polygon(0 100%,100% 100%,100% 100%,0 100%)}25%{opacity:1}100%{opacity:1;clip-path:polygon(0 0,100% 14%,100% 100%,0 100%);transform:none}}
/* The architectural walls build first; exact extracted logo panels crossfade in only when painting begins. */
.cc-cinema.is-playing .cc-panel-cyan,
.cc-cinema.is-playing .cc-panel-yellow,
.cc-cinema.is-playing .cc-panel-red{
  clip-path:none;
  transform:none;
  filter:none;
  animation:ccExactPanels .28s 3.28s ease-out forwards;
}
@keyframes ccExactPanels{from{opacity:0}to{opacity:1}}
/* Settle to the official 2D artwork with no underlay ghosting. */
.cc-cinema.is-playing .cc-wall-cyan{animation:ccWallCyan .72s .82s cubic-bezier(.18,.78,.25,1) forwards,ccWallFade .28s 5.14s ease-out forwards}
.cc-cinema.is-playing .cc-wall-yellow{animation:ccWallYellow .72s 1.52s cubic-bezier(.18,.78,.25,1) forwards,ccWallFade .28s 5.14s ease-out forwards}
.cc-cinema.is-playing .cc-wall-red{animation:ccWallRed .72s 2.22s cubic-bezier(.18,.78,.25,1) forwards,ccWallFade .28s 5.14s ease-out forwards}
@keyframes ccWallFade{to{opacity:0}}
.cc-cinema.is-playing .cc-brush-runner{animation:ccBrushRunner 1.72s 2.88s cubic-bezier(.2,.64,.28,1) forwards,ccBrushFinish .34s 5.62s ease-in-out forwards}
@keyframes ccBrushFinish{0%,100%{transform:none}48%{transform:translate(-1.2%,.8%) rotate(-1deg)}}