/* ============================================================
   RSB.ir — Apple Design refinements
   Fluid interfaces translated to the web:
   instant press feedback, spring-like motion, material depth,
   typography tracking, reduced-motion safety.
   ============================================================ */

/* ---------- Motion tokens ----------
:root{
    /* Spring-approximating easings (CSS can't do true springs;
       these curves mimic Apple's damped/underdamped responses) */
    --apple-ease: cubic-bezier(.22,.61,.36,1);          /* critically damped feel */
    --apple-ease-spring: cubic-bezier(.175,.885,.32,1.275); /* slight overshoot — momentum only */
    --apple-ease-out: cubic-bezier(.16,1,.3,1);          /* fast-in slow-out (iOS decel) */
    --apple-ease-in-out: cubic-bezier(.42,0,.58,1);      /* mirrored reversible */

    --apple-press-scale:.965;
    --apple-press-duration:.12s;
}

/* ============================================================
   1. RESPONSE — instant feedback on press, not just release
   ============================================================ */

/* Every interactive element responds the instant it's pressed.
   scale(.965) at 120ms reads as "alive", not "jumpy". */
a,button,.btn,[role="button"],
.rsb-card,.btn-grad,.btn-outline-grad,.header-pill,
.footer-logo-card,.rsb-hero__arrow,.rsb-hero__dot,
.main-nav .main-menu>li>a,.dropdown-menu li a,.submenu li a,
.rsb-province-btn,.rsb-iran-map-3d__person,
.owl-nav button,.rsb-news-nav,.rsb-scroll-top{
    -webkit-tap-highlight-color:transparent;
}
a:active,button:active,.btn:active,[role="button"]:active,
.btn-grad:active,.btn-outline-grad:active,.header-pill:active,
.footer-logo-card:active,.rsb-hero__arrow:active,.rsb-hero__dot:active,
.main-nav .main-menu>li>a:active,.dropdown-menu li a:active,.submenu li a:active,
.rsb-province-btn:active,.owl-nav button:active,.rsb-scroll-top:active{
    transform:scale(var(--apple-press-scale));
    transition:transform var(--apple-press-duration) var(--apple-ease-out)!important;
}

/* Cards press slightly but keep their hover lift composited */
.rsb-card:active{transform:translateY(-2px) scale(.985);transition:transform var(--apple-press-duration) var(--apple-ease-out)}
.rsb-iran-map-3d__person:active{transform:scale(.97);transition:transform var(--apple-press-duration) var(--apple-ease-out)}

/* ============================================================
   2. MOTION — spring-like easings on existing transitions
   ============================================================ */

/* Hover lifts feel like critically-damped springs: fast attach, graceful settle */
.rsb-card{transition:transform .45s var(--apple-ease),box-shadow .45s var(--apple-ease),border-color .3s var(--apple-ease)}
.btn-grad,.btn-outline-grad{transition:transform .35s var(--apple-ease),box-shadow .35s var(--apple-ease),background .3s ease,color .2s ease}
.header-pill{transition:transform .35s var(--apple-ease),background .3s ease,box-shadow .35s var(--apple-ease)}
.footer-logo-card{transition:transform .35s var(--apple-ease),background .3s ease,box-shadow .35s var(--apple-ease)}

/* ============================================================
   3. SPATIAL CONSISTENCY — menus/dropdowns anchor to trigger
   ============================================================ */

/* Dropdowns scale from their trigger edge, not their center */
.dropdown-menu,.submenu{
    transform-origin:top right; /* RTL: panel hangs from the right edge of trigger */
    transition:opacity .28s var(--apple-ease),transform .28s var(--apple-ease),visibility .28s;
}
.dropdown:hover>.dropdown-menu,.has-submenu:hover>.submenu,
.dropdown-menu.open,.submenu.open{
    transition-timing-function:var(--apple-ease),var(--apple-ease),step-end;
}

/* Premium glass panels — anchor + mirrored path in/out */
.rsb-menu-premium-panel,#rsbMenuPanel,#rsbAboutPanel{
    transform-origin:top right; /* RTL: hangs from trigger's right edge */
    transition:opacity .3s var(--apple-ease),transform .3s var(--apple-ease),visibility .3s;
}

/* ============================================================
   4. MATERIALS & DEPTH — vibrancy + scroll edge effects
   ============================================================ */

/* Text on translucent surfaces needs vibrancy: slightly heavier
   weight — never flat gray on blur (no tracking: Persian cursive) */
.rsb-menu-premium-panel a,#rsbMenuPanel a,#rsbAboutPanel a{
    font-weight:500;
}

/* Sticky header: soft edge fade instead of a hard shadow line —
   content reads as passing "under" a material, not bumping a divider.
   #header is the Porto sticky header; .header-body carries the chrome. */
#header.sticky-header-active .header-body{
    position:relative;
    box-shadow:0 1px 0 rgba(0,86,179,.08),0 10px 34px -14px rgba(0,86,179,.22);
}
#header.sticky-header-active .header-body::after{
    content:"";position:absolute;left:0;right:0;top:100%;height:14px;
    background:linear-gradient(to bottom,rgba(255,255,255,.5),transparent);
    pointer-events:none;
    mask-image:linear-gradient(to bottom,#000,transparent);
    -webkit-mask-image:linear-gradient(to bottom,#000,transparent);
}

/* ============================================================
   5. TYPOGRAPHY — size-specific tracking (Apple optical sizing)
   ============================================================
   NOTE: letter-spacing is applied ONLY to Latin/LTR text.
   Persian (Arabic script) is cursive — any non-zero tracking
   disconnects joined letters and breaks the typeface. For
   Persian text, optical sizing comes from leading + weight,
   not tracking. */
.ltr-text,[dir="ltr"],.rsb-hero__title .en,
.section-title .en,code,pre,.en-only{
    letter-spacing:-.01em;
}

/* Persian display text: Apple-style optical sizing would tighten
   leading — but hero caption line-heights are already tuned to
   the site's choreographed entrance; overriding them shifts the
   caption layout and reads as a jump on slide change. Skip. */

/* ============================================================
   6. ACCESSIBILITY — reduced motion & transparency (site-wide)
   ============================================================ */

/* Reduced motion: replace slides/springs with short cross-fades.
   Opacity still communicates state change — just without vestibular motion. */
@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
        transition-duration:.15s!important;
        scroll-behavior:auto!important;
    }
    [data-reveal]{transform:none!important;opacity:1!important}
    .rsb-hero__slide{transition:opacity .2s ease!important}
    .rsb-card,.btn-grad,.btn-outline-grad,.header-pill,.footer-logo-card{transform:none!important}
    a:active,button:active,.btn:active{transform:none!important}
    .rsb-hero__particle{animation:none!important;display:none}
    #header.sticky-header-active .header-body::after{display:none}
}

/* Reduced transparency: frosted surfaces go near-solid */
@media (prefers-reduced-transparency:reduce){
    #header .header-body{backdrop-filter:none;-webkit-backdrop-filter:none}
    #header.sticky-header-active .header-body::after{display:none}
    .rsb-menu-premium-panel,#rsbMenuPanel,#rsbAboutPanel,
    .dropdown-menu,.submenu{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}
    .auth-shell{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* Higher contrast preference: defined borders on translucent chrome */
@media (prefers-contrast:more){
    #header.sticky-header-active .header-body{box-shadow:0 0 0 2px var(--rsb-accent,#0056b3)}
    .dropdown-menu,.submenu,.rsb-menu-premium-panel{border-width:2px}
}

/* ============================================================
   7. GESTURE DETAILS — press feedback + hysteresis helpers
   ============================================================ */

/* Larger invisible hit area around small targets (10px hysteresis) */
.rsb-hero__dot{position:relative}
.rsb-hero__dot::before{
    content:"";position:absolute;inset:-10px;border-radius:50%;
}

/* Buttons: instant visual ack + keep the existing hover for release */
.btn-grad:active,.btn-outline-grad:active{
    transform:scale(.96) translateY(0);
    box-shadow:0 4px 14px rgba(0,86,179,.3);
}

/* Hero arrows — press = shrink + darken */
.rsb-hero__arrow:active{transform:scale(.9);opacity:.85}

/* ============================================================
   8. MOTION-JS HOOKS — states driven by Js/apple-motion.js
   ============================================================
   NOTE: .rsb-hero__slide keeps its ORIGINAL opacity transition.
   No transform transition here — slide transforms are driven
   1:1 by JS during drag and by Motion springs on release;
   a CSS transform transition would animate leftover positions
   and make the caption text appear to jump on slide change. */
.rsb-hero__viewport{touch-action:pan-y} /* allow vertical scroll, own horizontal */
.rsb-hero__slide.is-dragging{transition:none!important} /* 1:1 finger tracking */

/* Menu panels driven by spring JS get a class that disables CSS transitions */
.apple-springing{transition:none!important}

/* Rubber-band edge indicator (optional subtle cue) */
.apple-rubberband{transition:transform .5s var(--apple-ease-spring)}