/* oceanc motion layer — styles for elements built in Elementor with oc-* classes */
/* ---------- Brand fonts (files live in uploads/oceanc/fonts/) ---------- */
@font-face{font-family:"Graphik Arabic";src:url(fonts/GraphikArabic-Thin.ttf) format("truetype");font-weight:100;font-display:swap}
@font-face{font-family:"Graphik Arabic";src:url(fonts/GraphikArabic-Extralight.ttf) format("truetype");font-weight:200;font-display:swap}
@font-face{font-family:"Graphik Arabic";src:url(fonts/GraphikArabic-Light.woff2) format("woff2"),url(fonts/GraphikArabic-Light.ttf) format("truetype");font-weight:300;font-display:swap}
@font-face{font-family:"Graphik Arabic";src:url(fonts/GraphikArabic-Regular.woff2) format("woff2"),url(fonts/GraphikArabic-Regular.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Graphik Arabic";src:url(fonts/GraphikArabic-Medium.woff2) format("woff2"),url(fonts/GraphikArabic-Medium.ttf) format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"Graphik Arabic";src:url(fonts/GraphikArabic-Semibold.woff2) format("woff2"),url(fonts/GraphikArabic-Semibold.ttf) format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:"Graphik Arabic";src:url(fonts/GraphikArabic-Bold.woff2) format("woff2"),url(fonts/GraphikArabic-Bold.ttf) format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"Graphik Arabic";src:url(fonts/GraphikArabic-Black.ttf) format("truetype");font-weight:800;font-display:swap}
@font-face{font-family:"Graphik Arabic";src:url(fonts/GraphikArabic-Super.ttf) format("truetype");font-weight:900;font-display:swap}
@font-face{font-family:"Lyon Arabic Display";src:url(fonts/LyonArabicDisplay-Light.otf) format("opentype");font-weight:300;font-display:swap}
@font-face{font-family:"Lyon Arabic Display";src:url(fonts/LyonArabicDisplay-Regular.woff2) format("woff2"),url(fonts/LyonArabicDisplay-Regular.otf) format("opentype");font-weight:400;font-display:swap}
@font-face{font-family:"Lyon Arabic Display";src:url(fonts/LyonArabicDisplay-Medium.woff2) format("woff2"),url(fonts/LyonArabicDisplay-Medium.otf) format("opentype");font-weight:500;font-display:swap}
@font-face{font-family:"Lyon Arabic Display";src:url(fonts/LyonArabicDisplay-Bold.woff2) format("woff2"),url(fonts/LyonArabicDisplay-Bold.otf) format("opentype");font-weight:700;font-display:swap}
@font-face{font-family:"Lyon Arabic Display";src:url(fonts/LyonArabicDisplay-Black.otf) format("opentype");font-weight:900;font-display:swap}
body{font-family:"Graphik Arabic",system-ui,sans-serif;-webkit-font-smoothing:antialiased}

:root{--oc-ease:cubic-bezier(.2,.7,.2,1);--oc-blue:#7FD6DA;--oc-cyan:#1FB6E9;--oc-deep:#0E2A38;--oc-foam:#E8F1F5;--oc-line:rgba(232,241,245,.14)}
[dir="ltr"]{unicode-bidi:isolate}

/* hero + water surface */
.oc-hero{position:relative;overflow:hidden}
.oc-hero>.e-con-inner,.oc-hero>*:not(.oc-surface){position:relative;z-index:1}
.oc-surface{position:absolute;left:0;right:0;bottom:-1px;height:clamp(110px,14vw,190px);pointer-events:none;direction:ltr;overflow:hidden;z-index:0}
.oc-surface svg{position:absolute;left:0;bottom:0;width:200%;height:100%;will-change:transform}
.oc-surface .l1{animation:oc-drift 38s linear infinite}
.oc-surface .l2{animation:oc-drift 27s linear infinite reverse}
.oc-surface .l3{animation:oc-drift 52s linear infinite}
@keyframes oc-drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.oc-dive .elementor-button{display:inline-flex;flex-direction:column;align-items:center;gap:10px}
.oc-dive .elementor-button::after{content:"";width:1px;height:46px;background:linear-gradient(currentColor,transparent);animation:oc-drip 2.6s var(--oc-ease) infinite}
@keyframes oc-drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* deep section */
.oc-works{position:relative;overflow:hidden}
.oc-works>.e-con-inner{position:relative;z-index:1}
.oc-rays{position:absolute;inset:0 0 auto 0;height:700px;pointer-events:none;z-index:0;background:radial-gradient(ellipse 30% 60% at 30% 0%,rgba(46,178,230,.12),transparent 70%),radial-gradient(ellipse 20% 70% at 62% 0%,rgba(46,178,230,.08),transparent 70%)}
.oc-bubbles{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.oc-bubbles span{position:absolute;bottom:-20px;border-radius:50%;border:1px solid rgba(232,241,245,.18);animation:oc-rise linear infinite}
@keyframes oc-rise{to{transform:translateY(-120vh) translateX(20px);opacity:0}}

.oc-label .elementor-heading-title{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.oc-label .elementor-heading-title::after{content:"";flex:1;height:1px;background:var(--oc-line)}

/* filters: underline for the active item */
.oc-filters .e-filter-item{position:relative;transition:color .25s var(--oc-ease)}
.oc-filters .e-filter-item::after{content:"";position:absolute;inset:auto 0 0 0;height:2px;background:var(--oc-blue);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--oc-ease)}
.oc-filters .e-filter-item[aria-pressed="true"]::after{transform:scaleX(1)}

/* intro sentence */
.oc-intro p{margin:0}
.oc-intro em{font-style:normal;color:var(--oc-blue)}
.oc-intro .wd{display:inline-block;opacity:0;transform:translateY(8px);transition:opacity .45s var(--oc-ease),transform .45s var(--oc-ease)}
.oc-intro p.on .wd{opacity:1;transform:none}

/* cards */
.oc-grid .e-loop-item{opacity:0;transform:translateY(24px);transition:opacity .55s var(--oc-ease),transform .6s var(--oc-ease)}
.oc-grid .e-loop-item.oc-in{opacity:1;transform:none}
.oc-card-media{overflow:hidden;border-radius:6px}
.oc-card-media img{display:block;width:100%;transition:transform .6s var(--oc-ease),filter .4s var(--oc-ease)}
.oc-card:hover .oc-card-media img{transform:scale(1.04)}
.oc-grid.oc-hovering .e-loop-item:not(:hover) .oc-card-media img{filter:saturate(.6) brightness(.7)}

/* call to action arrow */
.oc-cta-link .elementor-button{background:transparent}
.oc-cta-link .elementor-button:hover{transform:translateX(-8px);transition:transform .4s var(--oc-ease)}

/* floating WhatsApp */
.oc-wa .elementor-button{width:58px;height:58px;padding:0!important;display:grid;place-items:center;box-shadow:0 10px 28px rgba(37,211,102,.35)}
.oc-wa .elementor-button-text{display:none}
.oc-wa .elementor-button-icon{margin:0!important}

@media (prefers-reduced-motion:reduce){
  .oc-surface svg,.oc-bubbles span,.oc-dive .elementor-button::after{animation:none}
  .oc-grid .e-loop-item,.oc-intro .wd{opacity:1;transform:none;transition:none}
}

/* header floats over the hero (design) */
body:has(.oc-hero) .elementor-location-header{position:absolute;inset:0 0 auto 0;z-index:20}
body.admin-bar:has(.oc-hero) .elementor-location-header{top:32px}
@media (max-width:782px){body.admin-bar:has(.oc-hero) .elementor-location-header{top:46px}}
.oc-header{background:transparent}
.oc-logo .elementor-heading-title,.oc-logo a{direction:ltr;unicode-bidi:isolate;text-decoration:none}
.oc-meta{direction:ltr;justify-content:flex-start!important}
.oc-meta .elementor-heading-title{text-align:left}
.oc-meta-label .elementor-heading-title{opacity:.7}
.oc-meta a,.oc-flink a{text-decoration:none}
.oc-ltr .elementor-heading-title{direction:ltr;text-align:right}
.oc-flink .elementor-heading-title a{color:inherit;display:inline-flex;gap:6px;transition:color .25s}
.oc-flink .elementor-heading-title a:hover{color:#E8F1F5}
.oc-flink i{font-style:normal;font-size:12px}

/* video cards */
.oc-card{cursor:pointer}
.oc-media{position:relative;overflow:hidden;border-radius:6px;background:var(--oc-deep)}
.oc-media video,.oc-media img{display:block;width:100%;height:auto;transition:transform .9s var(--oc-ease)}
.oc-card:hover .oc-media video{transform:scale(1.04)}
.oc-chip{position:absolute;top:14px;right:14px;display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:99px;background:rgba(5,15,21,.45);backdrop-filter:blur(10px);font-size:12px;color:#E8F1F5;direction:ltr;pointer-events:none}
.oc-chip svg{width:9px;height:9px;fill:currentColor}
.oc-grid.oc-hovering .e-loop-item:not(:hover) .oc-media video{filter:saturate(.6) brightness(.7)}

/* lightbox (design) */
.oc-lb{position:fixed;inset:0;z-index:99999;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);background:rgba(5,15,21,.94);backdrop-filter:blur(14px);opacity:0;visibility:hidden;transition:opacity .3s var(--oc-ease),visibility .3s;color:#E8F1F5}
.oc-lb.open{opacity:1;visibility:visible}
.oc-lb .stage{position:relative;padding:6vh 4vw;display:grid;place-items:center;min-height:0}
.oc-lb .stage img,.oc-lb .stage video{max-height:84vh;max-width:100%;width:auto;height:auto;object-fit:contain;border-radius:6px;animation:oc-pop .35s var(--oc-ease)}
@keyframes oc-pop{from{opacity:0;transform:scale(.98)}}
.oc-lb .info{padding:12vh 4vw 6vh;border-inline-end:1px solid rgba(232,241,245,.14);display:flex;flex-direction:column;gap:16px;text-align:right}
.oc-lb .info small{color:var(--oc-blue);font-size:13px}
.oc-lb .info h2{font-weight:600;font-size:clamp(28px,3vw,44px);line-height:1.3;color:#E8F1F5}
.oc-lb .info p{color:rgba(232,241,245,.55);line-height:1.9;font-weight:300}
.oc-lb .close{position:absolute;z-index:2;top:24px;left:24px;width:48px;height:48px;border-radius:50%;border:1px solid rgba(232,241,245,.14);background:none;color:#E8F1F5;font-size:22px;cursor:pointer;transition:background .25s}
.oc-lb .close:hover{background:rgba(232,241,245,.08)}
@media (max-width:640px){
  .oc-lb{grid-template-columns:1fr;grid-template-rows:auto 1fr;overflow:auto}
  .oc-lb .stage{padding:80px 16px 16px}
  .oc-lb .stage img,.oc-lb .stage video{width:100%;max-height:70vh}
  .oc-lb .info{border:0;padding:8px 16px 40px}
}

.oc-footer .oc-logo .elementor-heading-title{text-align:right}
.oc-footer [dir="ltr"]{white-space:nowrap;display:inline-block}

/* image + identity cards */
.oc-card-media{position:relative}
.oc-media img{display:block;width:100%;height:auto}
.oc-card:hover .oc-media img{transform:scale(1.04)}
.oc-chip svg{stroke:none}

/* lightbox: image slider */
.oc-lb .nav{display:flex;align-items:center;gap:14px;margin-top:auto}
.oc-lb .nav button{width:52px;height:52px;border-radius:50%;border:1px solid rgba(232,241,245,.14);background:none;color:#E8F1F5;font-size:20px;cursor:pointer;transition:background .25s}
.oc-lb .nav button:hover{background:rgba(232,241,245,.08)}
.oc-lb .nav .idx{font-size:14px;color:rgba(232,241,245,.55);direction:ltr}
.oc-lb .stage img{user-select:none;-webkit-user-drag:none}

/* lightbox: identity file = pages stacked like a case study */
.oc-lb.is-stack .stage{display:block;overflow-y:auto;padding:5vh 4vw;height:100vh;overscroll-behavior:contain}
.oc-lb.is-stack .nav button{display:none}
.oc-pages{display:flex;flex-direction:column;gap:18px;max-width:1280px;margin:0 auto}
.oc-pages img{width:100%!important;height:auto!important;max-height:none!important;border-radius:6px;background:#0E2A38;animation:none!important}
@media (max-width:640px){
  .oc-lb.is-stack{display:block;overflow-y:auto}
  .oc-lb.is-stack .stage{height:auto;overflow:visible;padding:8px 12px 40px}
  .oc-lb.is-stack .info{padding:76px 16px 8px}
  .oc-lb .nav{margin-top:8px}
  .oc-pages{gap:10px}
}

/* lightbox proportions: big stage, slim info panel */
.oc-lb{grid-template-columns:minmax(280px,1fr) minmax(0,1.6fr)}
.oc-lb.is-stack{grid-template-columns:minmax(260px,.75fr) minmax(0,2.25fr)}
.oc-chip{direction:rtl}
@media (max-width:640px){.oc-lb,.oc-lb.is-stack{grid-template-columns:1fr}}
.oc-lb:not(.open){pointer-events:none}

/* lightbox title: keep names on one balanced line */
.oc-lb .info h2{font-size:clamp(22px,2.1vw,34px);line-height:1.35;text-wrap:balance}
.oc-lb{grid-template-columns:minmax(320px,1fr) minmax(0,1.6fr)}
.oc-lb.is-stack{grid-template-columns:minmax(320px,.8fr) minmax(0,2.2fr)}
@media (max-width:640px){.oc-lb,.oc-lb.is-stack{grid-template-columns:1fr}}