/* ===== صيدة — مشهد البحرين (الصفحة الأولى) ===== */
.seasStage{height:100svh;min-height:600px;background:#043b30;--horizon:39svh;--gold-soft:#f2d793;overflow:hidden}

/* البحر الحي */
.ocean{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block;background:#043b30}

/* بديل بالصورة عند عدم دعم WebGL */
.world{position:absolute;inset:0;z-index:0;display:none;pointer-events:none}
.nogl .ocean{display:none}
.nogl .world{display:block}
.sea{position:absolute;inset:0;overflow:hidden;transition:clip-path 1.2s cubic-bezier(.2,.75,.2,1)}
.seaImg{position:absolute;inset:-3%;background:#0c6757 url('/concept/sea.png') center 60%/cover no-repeat}
.seaTint{position:absolute;inset:0}
.seaBusiness{clip-path:inset(0 0 0 50%)}
.seaPerson{clip-path:inset(0 50% 0 0)}
.seaBusiness .seaImg{filter:saturate(1.2) brightness(.66) contrast(1.18) sepia(.16)}
.seaBusiness .seaTint{background:linear-gradient(180deg,transparent 36%,#021f19d9 100%)}
.seaPerson .seaImg{scale:-1 1;filter:hue-rotate(16deg) saturate(1.35) brightness(1.2)}
.seaPerson .seaTint{background:linear-gradient(180deg,transparent 42%,#04404a99 100%)}
.nogl.hover-business .seaBusiness{clip-path:inset(0 0 0 38%)}.nogl.hover-business .seaPerson{clip-path:inset(0 62% 0 0)}
.nogl.hover-individual .seaBusiness{clip-path:inset(0 0 0 62%)}.nogl.hover-individual .seaPerson{clip-path:inset(0 38% 0 0)}

.seasShade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,#022a23b3 0,#022a2300 22%),linear-gradient(0deg,#01201acc 0,#01201a00 32%)}

/* الشعار في البداية — تُدار حركته من seas.js */
.seasStage .introMark{display:flex;opacity:0;background:transparent;z-index:7;will-change:transform,opacity,filter}
.seasStage .introMark .orbit{opacity:1}
.seasStage .introMark strong,.seasStage .introMark>span{opacity:1}

.seasStage header{position:relative;z-index:6}
.seasQuestion{position:absolute;top:calc(var(--horizon) * .44);left:0;right:0;z-index:4;margin:0;text-align:center;font-size:clamp(26px,2.6vw,40px);font-weight:500;color:#f6f0df;text-shadow:0 4px 30px #0a2a2266;pointer-events:none}
.seasQuestion em{font-style:normal;color:var(--gold);font-weight:700}

/* نصفا الشاشة: كل نصف يغطي بحره، وعرضه يتبع خط الالتقاء */
.seaSides{position:absolute;inset:0;z-index:5}
.seaSide{position:absolute;top:0;bottom:0;display:flex;align-items:flex-start;justify-content:center;padding:calc(var(--horizon) + 7svh) 3.2% 0;-webkit-tap-highlight-color:transparent;outline:none}
.seaSideBusiness{right:0;width:50%}
.seaSidePerson{left:0;width:50%}

/* الكارت الزجاجي */
.seaCard{position:relative;display:grid;justify-items:start;gap:10px;width:min(400px,100%);padding:28px 30px 26px;border-radius:24px;text-align:right;color:#f6f1e3;
  background:linear-gradient(160deg,rgba(9,48,40,.52),rgba(3,28,23,.34));
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 24px 60px rgba(1,20,16,.35),inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(18px) saturate(1.25);-webkit-backdrop-filter:blur(18px) saturate(1.25);
  transition:transform .7s cubic-bezier(.2,.75,.2,1),border-color .5s,box-shadow .6s,background .6s,opacity .5s;will-change:transform}
.seaCard::before{content:'';position:absolute;top:-1px;right:24px;left:24px;height:1px;background:linear-gradient(90deg,transparent,#f2d793cc,transparent);opacity:.55;transition:opacity .5s}
.seaSidePerson .seaCard{background:linear-gradient(160deg,rgba(8,60,62,.5),rgba(3,32,36,.32))}
.seaCard strong{font-size:clamp(26px,2.3vw,34px);line-height:1.35;font-weight:700;letter-spacing:-.3px}
.sideLine{font-size:14.5px;line-height:1.95;color:#d3e3d8;text-wrap:pretty}
.sideCta{display:inline-flex;align-items:center;gap:10px;margin-top:8px;padding:9px 20px;border-radius:40px;border:1px solid #f2d79359;color:var(--gold-soft);font-size:14px;transition:background .4s,border-color .4s,color .4s}
.sideCta b{font-weight:400;transition:transform .4s}

.seaSide.active .seaCard{transform:translateY(-6px);border-color:rgba(242,215,147,.45);box-shadow:0 30px 70px rgba(1,20,16,.45),0 0 60px rgba(242,215,147,.12),inset 0 1px 0 rgba(255,255,255,.12)}
.seaSide.active .seaCard::before{opacity:1}
.seaSide.active .sideCta{background:var(--gold-soft);border-color:var(--gold-soft);color:#082c24}
.seaSide.active .sideCta b{transform:translateX(-4px)}
.seaSide.muted .seaCard{opacity:.5;transform:scale(.97)}
.seaSide:focus-visible .seaCard{outline:2px solid var(--gold);outline-offset:4px}

.soundToggle{position:absolute;left:4%;bottom:24px;z-index:8;width:42px;height:42px;display:grid;place-items:center;border-radius:50%;border:1px solid #e6f5de33;background:#063d3240;color:#e8dcb6;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .25s,border-color .25s,opacity .6s}
.soundToggle:hover,.soundToggle:focus-visible{background:#f1fadc1c;border-color:var(--gold)}
.soundToggle svg{width:20px;height:20px}
.soundToggle .off,.soundToggle[aria-pressed="false"] .on{display:none}
.soundToggle[aria-pressed="false"] .off{display:block}

.flood{position:absolute;inset:0;z-index:20;background:#043b30;opacity:0;pointer-events:none;transition:opacity .45s ease-in}
.leaving .flood{opacity:1}

/* أثناء الافتتاحية تُخفى الواجهة ثم تظهر تدريجيًا من seas.js */
.intro .seasQuestion,.intro .seaCard,.intro header,.intro .soundToggle{opacity:0}
.intro .seaSides{pointer-events:none}

@media(max-width:1050px){.seaCard{padding:22px 22px 20px}.sideLine{font-size:13.5px}}
@media(max-width:700px){
  .seasStage{min-height:620px}
  .seasQuestion{font-size:26px;top:calc(var(--horizon) * .5)}
  .seaSide{align-items:flex-end;padding:0 6px 92px}
  .seaSideBusiness{padding-right:12px}.seaSidePerson{padding-left:12px}
  .seaCard{padding:16px 14px 14px;border-radius:18px;gap:6px}
  .seaCard strong{font-size:20px;white-space:nowrap}
  .sideLine{font-size:11.5px;line-height:1.8}
  .sideCta{margin-top:4px;padding:6px 12px;font-size:12px;gap:6px}
  .seaSide.muted .sideLine{display:none}
  .seaSide.muted .seaCard strong{font-size:16px}
  .soundToggle{left:5%;bottom:22px;width:38px;height:38px}
}
@media(max-height:700px) and (min-width:701px){.seaSide{padding-top:calc(var(--horizon) + 4svh)}.seaCard{padding:20px 24px}.sideLine{display:none}}

/* ================= المشهد الثاني: الصياد ================= */
.boatLayer{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.boatWrap{position:absolute;left:1%;bottom:11%;width:52%;opacity:0;will-change:transform,opacity;transform-origin:55% 86%}
.boatWrap img{display:block;width:100%;height:auto;user-select:none;filter:drop-shadow(0 18px 14px rgba(2,32,26,.28));
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 82%,rgba(0,0,0,.45) 85.5%,transparent 89%);mask-image:linear-gradient(to bottom,#000 0,#000 82%,rgba(0,0,0,.45) 85.5%,transparent 89%)}
.castLine{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;opacity:0}

.scene2{position:absolute;inset:0;z-index:5;pointer-events:none}
.in-scene2 .scene2{pointer-events:none}
.in-scene2 .catchPanel{pointer-events:auto}
.scene2 .s2Story,.scene2 .catchPanel,.scene2 .s2Caption{opacity:0}
.s2Story{position:absolute;right:8%;top:calc(var(--horizon) * .3);width:42%;text-align:right}
.s2Story h2{margin:0;font-size:clamp(44px,5vw,84px);line-height:1.3;letter-spacing:-1.5px;font-weight:500;color:#f6f1e3;text-align:right;text-shadow:0 8px 40px rgba(2,30,24,.45)}
.s2Story em{font-style:normal;color:#f4d488;font-weight:700;text-shadow:0 2px 3px rgba(60,30,0,.35),0 8px 34px rgba(40,22,0,.55)}

.catchPanel{position:absolute;right:7%;bottom:15%;width:min(440px,34vw);display:grid;gap:12px}
.seaBack{justify-self:start;display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:30px;border:1px solid rgba(255,255,255,.18);background:rgba(4,34,28,.42);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#ecd9a6;font-size:13px;cursor:pointer;transition:border-color .3s,background .3s}
.seaBack:hover,.seaBack:focus-visible{border-color:var(--gold);background:rgba(20,92,70,.5)}
.seaBack .gateName{color:#c9dccf;font-size:12px;border-inline-start:1px solid rgba(255,255,255,.22);padding-inline-start:8px}
.catchCards{display:grid;gap:12px}
.catchCard{position:relative;display:flex;align-items:center;gap:16px;padding:18px 20px;border-radius:20px;color:#f6f1e3;text-align:right;
  background:linear-gradient(160deg,rgba(9,48,40,.55),rgba(3,28,23,.36));border:1px solid rgba(255,255,255,.13);
  box-shadow:0 20px 50px rgba(1,20,16,.32),inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(18px) saturate(1.25);-webkit-backdrop-filter:blur(18px) saturate(1.25);
  transition:border-color .4s,box-shadow .5s,background .5s;opacity:0}
.gate-individual .catchCard{background:linear-gradient(160deg,rgba(8,60,62,.52),rgba(3,32,36,.34))}
.catchCard::before{content:'';position:absolute;top:-1px;right:22px;left:22px;height:1px;background:linear-gradient(90deg,transparent,#f2d793cc,transparent);opacity:.5}
.catchIcon{width:50px;height:50px;flex-shrink:0;display:grid;place-items:center;border-radius:15px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);color:#ecd49c}
.catchIcon svg{width:24px;height:24px}
.catchText{flex:1;display:grid;gap:2px}
.catchText small{font-size:12.5px;color:#bcd3c4}
.catchText strong{font-size:20px;font-weight:700;line-height:1.5}
.catchGo{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(242,215,147,.35);color:var(--gold-soft);transition:background .3s,color .3s,transform .3s}
.catchCard:hover,.catchCard:focus-visible,.catchCard.caught{border-color:rgba(242,215,147,.5);box-shadow:0 26px 60px rgba(1,20,16,.42),0 0 50px rgba(242,215,147,.13),inset 0 1px 0 rgba(255,255,255,.12);outline:none}
.catchCard:hover .catchGo,.catchCard:focus-visible .catchGo{background:var(--gold-soft);color:#082c24;transform:translateX(-3px)}

.s2Caption{position:absolute;left:8%;bottom:7%;display:flex;align-items:center;gap:12px;font-size:13px;color:#e2ece2;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.s2Caption .captionRule{width:36px;height:1px;background:#d4c393}

.in-scene2 .seaSides,.in-scene2 .seasQuestion{opacity:0;pointer-events:none;transition:opacity .45s}
.seaSides,.seasQuestion{transition:opacity .6s}

@media(max-width:1050px){.boatWrap{width:56%;left:-3%}.catchPanel{right:5%;width:min(400px,40vw)}.s2Story{width:46%}}
@media(max-width:700px){
  .s2Story{right:6%;left:6%;width:auto;top:calc(var(--horizon) * .3);text-align:center}
  .s2Story h2{font-size:40px;text-align:center;letter-spacing:-.5px}
  .s2Story h2 br{display:none}
  .boatWrap{width:96%;left:2%;bottom:auto;top:calc(var(--horizon) - 4%)}
  .catchPanel{right:5%;left:5%;width:auto;bottom:22px;gap:9px}
  .catchCard{padding:13px 14px;gap:12px;border-radius:17px}
  .catchIcon{width:42px;height:42px;border-radius:13px}
  .catchText strong{font-size:17px}
  .catchText small{font-size:11.5px}
  .catchGo{width:30px;height:30px}
  .s2Caption{left:0;right:0;justify-content:center;bottom:auto;top:calc(var(--horizon) + 30%);font-size:12px}
  .in-scene2 .soundToggle{opacity:0;pointer-events:none}
}