/* OASIS GLASS — Crystal Atmosphere v1.7.0
   Purely additive visual layer: no layout sizing overrides. */

:root{
  --og-glass-edge: rgba(255,255,255,.72);
  --og-glass-edge-soft: rgba(171,232,247,.42);
  --og-glass-cyan: rgba(0,188,191,.30);
  --og-glass-blue: rgba(0,124,191,.24);
  --og-glass-shadow: rgba(0,52,94,.13);
  --og-specular: rgba(255,255,255,.94);
}

/* Site-wide optical atmosphere */
body.og-glass-experience{
  position:relative;
  isolation:isolate;
  background-attachment:fixed;
}
body.og-glass-experience::before,
body.og-glass-experience::after{
  content:"";
  position:fixed;
  z-index:-2;
  pointer-events:none;
  inset:auto;
  border-radius:50%;
  filter:blur(4px);
  transform:translateZ(0);
}
body.og-glass-experience::before{
  width:min(52vw,760px);
  height:min(52vw,760px);
  inset-inline-start:-15vw;
  top:18vh;
  background:radial-gradient(circle at 60% 45%,rgba(129,239,246,.16),rgba(0,124,191,.075) 37%,transparent 70%);
  animation:ogAtmosphereA 14s ease-in-out infinite alternate;
}
body.og-glass-experience::after{
  width:min(46vw,680px);
  height:min(46vw,680px);
  inset-inline-end:-12vw;
  top:52vh;
  background:radial-gradient(circle at 35% 40%,rgba(255,255,255,.55),rgba(0,188,191,.09) 32%,transparent 72%);
  animation:ogAtmosphereB 17s ease-in-out infinite alternate;
}
@keyframes ogAtmosphereA{to{transform:translate3d(6vw,-3vh,0) scale(1.06)}}
@keyframes ogAtmosphereB{to{transform:translate3d(-5vw,4vh,0) scale(.95)}}

/* A very soft caustic refraction texture */
main{position:relative;isolation:isolate}
main::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.24;
  background:
    linear-gradient(118deg,transparent 0 31%,rgba(255,255,255,.32) 34%,transparent 38% 100%),
    linear-gradient(64deg,transparent 0 63%,rgba(157,235,247,.15) 66%,transparent 70% 100%);
  background-size:980px 760px,820px 680px;
  animation:ogCaustics 22s linear infinite;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.55),transparent 96%);
}
@keyframes ogCaustics{to{background-position:980px 150px,-820px 120px}}

/* The reusable glass optical layer. JS adds the class without changing layout. */
.og-glass-fx{
  --og-mx:50%;
  --og-my:50%;
  position:relative;
  isolation:isolate;
  transform-style:preserve-3d;
}
.og-glass-fx > .og-glass-glint{
  position:absolute;
  inset:0;
  z-index:30;
  border-radius:inherit;
  pointer-events:none;
  overflow:hidden;
  opacity:.88;
  mix-blend-mode:screen;
}
.og-glass-fx > .og-glass-glint::before{
  content:"";
  position:absolute;
  width:52%;
  height:180%;
  left:-72%;
  top:-40%;
  transform:rotate(17deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.04) 18%,rgba(255,255,255,.72) 50%,rgba(191,242,251,.24) 68%,transparent);
  filter:blur(.4px);
  opacity:0;
}
.og-glass-fx.is-inview > .og-glass-glint::before{
  animation:ogPanelSweep 1.55s cubic-bezier(.2,.7,.25,1) .15s 1;
}
.og-glass-fx:hover > .og-glass-glint::before{
  opacity:.62;
  animation:ogPanelSweep 1.3s cubic-bezier(.2,.7,.25,1) 1;
}
.og-glass-fx > .og-glass-glint::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    radial-gradient(230px circle at var(--og-mx) var(--og-my),rgba(255,255,255,.28),rgba(182,238,248,.07) 37%,transparent 66%),
    linear-gradient(145deg,rgba(255,255,255,.28),transparent 30%,transparent 67%,rgba(124,220,236,.14));
  opacity:.55;
  transition:opacity .25s ease;
}
.og-glass-fx:hover > .og-glass-glint::after{opacity:.95}
@keyframes ogPanelSweep{
  0%{left:-72%;opacity:0}
  18%{opacity:.7}
  72%{opacity:.52}
  100%{left:122%;opacity:0}
}

/* Optical edge — feels like polished glass, without touching dimensions */
.og-glass-fx{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.78),
    inset 0 -1px 0 rgba(78,174,206,.10),
    0 18px 48px var(--og-glass-shadow);
}
.og-glass-fx:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 0 -1px 0 rgba(64,187,212,.16),
    0 24px 64px rgba(0,65,107,.16),
    0 0 0 1px rgba(179,234,246,.18);
}

/* Main navigation gets a polished top edge */
.site-header .nav-wrap::after{
  content:"";
  position:absolute;
  inset-inline:3%;
  top:2px;
  height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.95) 18%,rgba(153,231,247,.58) 50%,rgba(255,255,255,.9) 82%,transparent);
  filter:drop-shadow(0 1px 2px rgba(255,255,255,.6));
  opacity:.9;
}

/* Images: polished bevel + moving reflection */
.page-hero-image-glass,
.hero-card-main,
.product-image,
.about-image,
.gallery-item,
.bento-card,
.catalog-cover,
.ceo-visual{
  position:relative;
}
.page-hero-image-glass::before,
.hero-card-main::before,
.about-image::before,
.ceo-visual::before{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),inset 0 18px 38px rgba(255,255,255,.08);
}

/* Buttons get a restrained glass specular streak */
.btn,
.nav-cta,
.floating-whatsapp,
.icon-btn{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.btn::after,
.nav-cta::after,
.floating-whatsapp::after,
.icon-btn::after{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:2;
  width:45%;
  height:220%;
  left:-75%;
  top:-60%;
  transform:rotate(18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.62),transparent);
  opacity:0;
}
.btn:hover::after,
.nav-cta:hover::after,
.floating-whatsapp:hover::after,
.icon-btn:hover::after{animation:ogButtonSweep .9s ease 1}
@keyframes ogButtonSweep{0%{left:-75%;opacity:0}25%{opacity:.65}100%{left:135%;opacity:0}}

/* Tiny star glints on the most premium surfaces */
.hero-card-main .og-glass-glint span,
.page-hero-frame .og-glass-glint span{display:none}
.og-glass-star{
  position:absolute;
  z-index:35;
  width:18px;
  height:18px;
  pointer-events:none;
  opacity:.0;
  filter:drop-shadow(0 0 5px rgba(171,239,250,.9));
}
.og-glass-star::before,.og-glass-star::after{
  content:"";
  position:absolute;
  inset:50% auto auto 50%;
  transform:translate(-50%,-50%);
  border-radius:999px;
  background:white;
}
.og-glass-star::before{width:2px;height:18px}
.og-glass-star::after{width:18px;height:2px}
.og-glass-fx.is-inview > .og-glass-star{animation:ogStar 3.6s ease-in-out .5s infinite}
@keyframes ogStar{0%,72%,100%{opacity:0;transform:scale(.35) rotate(0)}82%{opacity:.94;transform:scale(1) rotate(35deg)}90%{opacity:0;transform:scale(1.45) rotate(55deg)}}

/* Socials: preserve brand colors, add glass reflection instead of repainting them */
.social-links a,.social-links .social-disabled{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.social-links a::after,.social-links .social-disabled::after{
  content:"";
  position:absolute;
  inset:-45% -75%;
  transform:rotate(25deg) translateX(-48%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.62),transparent);
  opacity:.0;
  transition:transform .55s ease,opacity .3s ease;
}
.social-links a:hover::after{opacity:.7;transform:rotate(25deg) translateX(48%)}

/* Dark mode: still glass, not gray plastic */
html[data-theme="dark"] .og-glass-fx > .og-glass-glint::after{
  background:radial-gradient(220px circle at var(--og-mx) var(--og-my),rgba(140,229,244,.13),transparent 66%),linear-gradient(145deg,rgba(255,255,255,.08),transparent 32%,rgba(0,188,191,.05));
}
html[data-theme="dark"] .og-glass-fx{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 20px 58px rgba(0,10,27,.25);
}

/* Mobile: keep the feeling, lower GPU cost and never affect geometry */
@media (max-width:760px){
  body.og-glass-experience::before{width:110vw;height:110vw;left:-55vw;top:22vh;opacity:.7}
  body.og-glass-experience::after{width:100vw;height:100vw;right:-54vw;top:58vh;opacity:.65}
  main::before{opacity:.13;background-size:720px 620px,620px 560px}
  .og-glass-fx > .og-glass-glint::after{opacity:.42}
  .og-glass-fx{box-shadow:inset 0 1px 0 rgba(255,255,255,.66),0 13px 34px rgba(0,58,95,.09)}
  .og-glass-star{display:none}
}

@media (prefers-reduced-motion:reduce){
  body.og-glass-experience::before,
  body.og-glass-experience::after,
  main::before,
  .og-glass-fx > .og-glass-glint::before,
  .og-glass-star,
  .btn::after,.nav-cta::after,.floating-whatsapp::after,.icon-btn::after{animation:none!important}
  .og-glass-fx > .og-glass-glint::before{display:none}
}