/* abay.co.il — zirofim's language (splash, full-screen slides, serif display, halo nav)
   in a palette taken from the painting "עדן בים": dark sea, slate water, sunset, foam.
   One deliberate look; no light/dark switch. */
:root {
  --sea-deep: #131d2b;
  --sea:      #263449;
  --slate:    #5b6878;
  --mist:     #9aa3ad;
  --sunset:   #ec7424;
  --ember:    #f6a640;
  --foam:     #f6f2ec;
  --serif: 'Frank Ruhl Libre', 'Times New Roman', serif;
  --sans:  'Heebo', 'Arial Hebrew', Arial, sans-serif;
  color-scheme: light;
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { background: var(--foam); }
body { background: var(--foam); color: var(--sea-deep); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--sunset); outline-offset: 4px; }

/* type */
.badge { display: block; font-size: 1rem; font-weight: 600; letter-spacing: .25em; color: var(--mist); margin-bottom: 1.25rem; }
.huge-title { font-family: var(--serif); font-weight: 300; font-size: clamp(2.4rem, 6vw, 4.5rem); line-height: 1.1; letter-spacing: -.02em; margin-bottom: 1.25rem; text-wrap: balance; }
.subtitle { font-size: 1.35rem; font-weight: 300; line-height: 1.8; max-width: 640px; }
.hl span { display: inline; padding: .2rem .6rem; border-radius: 4px; box-decoration-break: clone; -webkit-box-decoration-break: clone; background: rgba(246,242,236,.6); }
.dark .hl span, .on-image .hl span { background: rgba(19,29,43,.55); }
.dark { background: var(--sea-deep); color: var(--foam); }
.btn { display: inline-block; padding: 1rem 2.6rem; border-radius: 50px; border: 1px solid currentColor; text-decoration: none; font-size: 1.05rem; font-weight: 500; transition: all .3s; }
.btn:hover { background: var(--sea-deep); color: var(--foam); border-color: var(--sea-deep); transform: translateY(-2px); }
.dark .btn:hover, .on-image .btn:hover { background: var(--foam); color: var(--sea-deep); border-color: var(--foam); }

/* inner pages: vertical sections */
.page-head { position: relative; min-height: 70vh; display: flex; align-items: flex-end; overflow: hidden; }
.page-head .bg { position: absolute; inset: 0; }
.page-head .bg img { width: 100%; height: 100%; object-fit: cover; }
.page-head .veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(19,29,43,.05) 0%, rgba(19,29,43,.35) 50%, rgba(19,29,43,.9) 100%); }
.wrap { position: relative; z-index: 2; width: 100%; max-width: 1100px; margin-inline: auto; padding-left: max(1.5rem, env(safe-area-inset-left, 0px)); padding-right: max(1.5rem, env(safe-area-inset-right, 0px)); }
.page-head .wrap { padding-block: 6rem 3.5rem; color: var(--foam); }
.sec { padding-block: clamp(4rem, 9vw, 7rem); position: relative; }
.sec.center { text-align: center; }
.sec.center .subtitle { margin-inline: auto; }

/* floating halo nav (all pages) */
.fnav { position: fixed; bottom: calc(32px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); z-index: 1000; display: flex; justify-content: center; align-items: center; pointer-events: none; }
.fn-toggle { position: absolute; display: flex; align-items: center; justify-content: center; transition: opacity .4s, transform .4s; pointer-events: auto; }
.fnav.is-open .fn-toggle { opacity: 0; transform: scale(.5); pointer-events: none; }
.fn-halo { position: absolute; top: 50%; left: 50%; width: 60px; height: 60px; transform: translate(-50%,-50%); border: 1px solid rgba(236,116,36,.7); border-radius: 50%; animation: halo 2.4s cubic-bezier(.16,1,.3,1) infinite; pointer-events: none; }
@keyframes halo { from { width: 60px; height: 60px; opacity: 1; } to { width: 126px; height: 126px; opacity: 0; } }
.fn-btn { position: relative; width: 60px; height: 60px; border-radius: 50%; background: var(--foam); border: 1px solid rgba(255,255,255,.8); color: var(--sea-deep); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 0 18px rgba(246,166,64,.45), 0 4px 15px rgba(0,0,0,.15); }
.fn-tabs { display: flex; gap: .6rem; opacity: 0; transform: translateY(20px) scale(.9); pointer-events: none; transition: all .5s cubic-bezier(.16,1,.3,1); }
.fnav.is-open .fn-tabs { opacity: 1; transform: none; pointer-events: auto; }
.fn-tab { background: var(--foam); color: var(--sea-deep); text-decoration: none; padding: .75rem 1.4rem; border-radius: 40px; font-size: 1rem; font-weight: 500; box-shadow: 0 10px 30px rgba(0,0,0,.15); white-space: nowrap; }
.fn-tab:hover, .fn-tab[aria-current] { background: var(--ember); }

/* custom cursor */
@media (pointer: fine) { body, a, button, [role="button"] { cursor: none; } }
.cursor { position: fixed; top: 0; left: 0; width: 14px; height: 14px; background: #fff; border-radius: 50%; pointer-events: none; z-index: 9999999; transform: translate(-50%,-50%); transition: width .3s cubic-bezier(.16,1,.3,1), height .3s cubic-bezier(.16,1,.3,1); mix-blend-mode: difference; }
.cursor.hovering { width: 40px; height: 40px; background: rgba(255,255,255,.5); }
@media (pointer: coarse) { .cursor { display: none; } }

/* breathing orbs (breath page + home) */
.orb-wrap { width: 130px; height: 130px; display: grid; place-items: center; }
.orb { width: 56px; height: 56px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff 0%, var(--ember) 35%, var(--sunset) 70%); box-shadow: 0 0 40px rgba(236,116,36,.35); }
.orb.b-belly { animation: b-belly 8s ease-in-out infinite; }
.orb.b-46 { animation: b-46 10s ease-in-out infinite; }
.orb.b-478 { animation: b-478 19s ease-in-out infinite; }
@keyframes b-belly { 0%,100% { transform: scale(1); } 50% { transform: scale(2); } }
@keyframes b-46 { 0%,100% { transform: scale(1); } 40% { transform: scale(2); } }
@keyframes b-478 { 0%,100% { transform: scale(1); } 21% { transform: scale(2); } 58% { transform: scale(2); } }

footer.site { background: var(--sea-deep); color: var(--mist); text-align: center; font-size: .95rem; padding: 3rem 1.5rem 8rem; display: grid; gap: .4rem; justify-items: center; }
footer.site b { font-family: var(--serif); font-weight: 400; font-size: 1.6rem; color: var(--foam); }
footer.site a { color: var(--foam); }

@media (max-width: 900px) {
  .cursor { display: none !important; }
  .fn-tabs { flex-direction: column; align-items: center; }
  .fnav { bottom: calc(22px + env(safe-area-inset-bottom, 0px)); }
  .subtitle { font-size: 1.15rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}