/* Interactive home-hero portals — HTML glass tiles (photo stays text-free). */
html body :is(#home-landing, .hero-preview) .home-hero-portals{
position:absolute;
inset:0;
z-index:3;
margin:0;
padding:0;
pointer-events:none;
opacity:0;
transition:opacity .22s ease;
}
html body :is(#home-landing, .hero-preview) .home-hero-portals[data-ready="1"]{
opacity:1;
}
html body :is(#home-landing, .hero-preview) .home-hero-portal{
--portal-accent:#5b6cff;
position:absolute;
/* LTR flex so the icon sits on the visual left; Arabic label still reads RTL. */
direction:ltr;
display:flex;
align-items:center;
gap:calc(var(--portal-gap, 10px) * var(--portal-icons, 1));
box-sizing:border-box;
pointer-events:auto;
padding:var(--portal-pad-y, 11px) var(--portal-pad-x, 14px) var(--portal-pad-y, 11px) calc(var(--portal-pad-x, 14px) - 2px);
border:1px solid rgba(255,255,255, var(--portal-border-a, .58));
border-radius:var(--portal-radius, 18px);
/* Defaults match 95% transparency; studio overrides via --portal-* vars. */
background:
linear-gradient(145deg, rgba(255,255,255, var(--portal-fill-a, .05)), rgba(255,255,255, var(--portal-fill-b, .04))),
color-mix(in srgb, var(--portal-accent) var(--portal-accent-tint, 3%), transparent);
box-shadow:
0 0 0 1px rgba(12,24,56, calc(.10 * var(--portal-shadow, 1))),
0 14px 34px rgba(12,24,56, calc(.18 * var(--portal-shadow, 1))),
inset 0 1px 0 rgba(255,255,255,.72),
inset 0 -1px 0 rgba(12,24,56,.06);
backdrop-filter:blur(var(--portal-blur, 18px)) saturate(var(--portal-saturate, 1.25));
-webkit-backdrop-filter:blur(var(--portal-blur, 18px)) saturate(var(--portal-saturate, 1.25));
cursor:pointer;
-webkit-tap-highlight-color:transparent;
outline:none;
text-decoration:none;
color:#12203f;
transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
overflow:hidden;
}
html body :is(#home-landing, .hero-preview) .home-hero-portal[data-view="learn"]{--portal-accent:#e23b6d}
html body :is(#home-landing, .hero-preview) .home-hero-portal[data-view="situations"]{--portal-accent:#2f7cf6}
html body :is(#home-landing, .hero-preview) .home-hero-portal[data-view="grammar"]{--portal-accent:#2f9e6b}
html body :is(#home-landing, .hero-preview) .home-hero-portal[data-view="verbs"]{--portal-accent:#7a4dff}
html body :is(#home-landing, .hero-preview) .home-hero-portal[data-view="listen"]{--portal-accent:#ef7a2d}
html body :is(#home-landing, .hero-preview) .home-hero-portal[data-view="words"]{--portal-accent:#1f9e9a}
html body :is(#home-landing, .hero-preview) .home-hero-portal[data-view="saved"]{--portal-accent:#4b5bd8}
html body :is(#home-landing, .hero-preview) .home-hero-portal[hidden]{
display:none !important;
}
/* Inner accent frame + soft highlight edge */
html body :is(#home-landing, .hero-preview) .home-hero-portal::before{
content:"";
position:absolute;
inset:var(--portal-frame-inset, 3px);
border-radius:calc(var(--portal-radius, 18px) - 3px);
border:1px solid color-mix(in srgb, var(--portal-accent) var(--portal-frame-strength, 42%), rgba(255,255,255,.35));
box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
pointer-events:none;
z-index:0;
opacity:var(--portal-frames, 1);
}
html body :is(#home-landing, .hero-preview) .home-hero-portal::after{
content:"";
position:absolute;
left:10px;
top:8px;
bottom:8px;
width:2px;
border-radius:999px;
background:linear-gradient(180deg, transparent, var(--portal-accent), transparent);
opacity:calc(.45 * var(--portal-accent-bar, 1));
pointer-events:none;
z-index:0;
}
html body :is(#home-landing, .hero-preview) .home-hero-portal-mark{
position:relative;
left:auto;
top:auto;
z-index:1;
display:grid;
place-items:center;
flex:0 0 auto;
width:calc(var(--portal-icon-size, 34px) * var(--portal-icons, 1));
height:calc(var(--portal-icon-size, 34px) * var(--portal-icons, 1));
overflow:hidden;
margin:0;
border-radius:calc(var(--portal-icon-size, 34px) * .35);
pointer-events:none;
opacity:var(--portal-icons, 1);
transform:none;
color:#fff;
background:
radial-gradient(circle at 30% 28%, rgba(255,255,255,.55), transparent 46%),
linear-gradient(145deg, color-mix(in srgb, var(--portal-accent) 92%, #fff), var(--portal-accent));
box-shadow:
0 6px 16px color-mix(in srgb, var(--portal-accent) 40%, transparent),
inset 0 1px 0 rgba(255,255,255,.45);
transition:transform .2s ease, box-shadow .2s ease;
}
html body :is(#home-landing, .hero-preview) .home-hero-portal-glyph,
html body #home-landing .home-hero-portal-strip .home-hero-portal-glyph{
width:18px;
height:18px;
fill:none;
stroke:currentColor;
stroke-width:2.1;
stroke-linecap:round;
stroke-linejoin:round;
}
html body #home-landing .home-hero-portal-strip .home-hero-portal-mark{
position:relative;
left:auto;
top:auto;
display:grid;
place-items:center;
width:30px;
height:30px;
flex:0 0 auto;
pointer-events:none;
opacity:1;
transform:none;
border-radius:10px;
color:#fff;
background:
radial-gradient(circle at 30% 28%, rgba(255,255,255,.5), transparent 46%),
linear-gradient(145deg, #4d6dff, #2348c8);
box-shadow:0 4px 12px rgba(18,58,207,.22);
}
html body #home-landing .home-hero-portal-strip a[data-view="learn"] .home-hero-portal-mark{background:linear-gradient(145deg,#ff6b8d,#e23b6d)}
html body #home-landing .home-hero-portal-strip a[data-view="situations"] .home-hero-portal-mark{background:linear-gradient(145deg,#5b9bff,#2f7cf6)}
html body #home-landing .home-hero-portal-strip a[data-view="grammar"] .home-hero-portal-mark{background:linear-gradient(145deg,#4ecf95,#2f9e6b)}
html body #home-landing .home-hero-portal-strip a[data-view="verbs"] .home-hero-portal-mark{background:linear-gradient(145deg,#9b78ff,#7a4dff)}
html body #home-landing .home-hero-portal-strip a[data-view="listen"] .home-hero-portal-mark{background:linear-gradient(145deg,#ff9a4d,#ef7a2d)}
html body #home-landing .home-hero-portal-strip a[data-view="words"] .home-hero-portal-mark{background:linear-gradient(145deg,#3fc4bf,#1f9e9a)}
html body #home-landing .home-hero-portal-strip a[data-view="saved"] .home-hero-portal-mark{background:linear-gradient(145deg,#6f7dff,#4b5bd8)}
html body :is(#home-landing, .hero-preview) .home-hero-portal-mark i,
html body #home-landing .home-hero-portal-strip .home-hero-portal-mark i{
display:none;
}
html body :is(#home-landing, .hero-preview) .home-hero-portal:hover,
html body :is(#home-landing, .hero-preview) .home-hero-portal:focus-visible{
transform:translateY(calc(var(--portal-hover-lift, 3px) * -1)) scale(1.015);
border-color:rgba(255,255,255,.82);
background:
linear-gradient(145deg, rgba(255,255,255, var(--portal-hover-fill-a, .10)), rgba(255,255,255, var(--portal-hover-fill-b, .06))),
color-mix(in srgb, var(--portal-accent) var(--portal-hover-accent-tint, 5%), transparent);
box-shadow:
0 0 0 1px color-mix(in srgb, var(--portal-accent) 28%, rgba(12,24,56,.12)),
0 20px 40px rgba(12,24,56, calc(.24 * var(--portal-shadow, 1))),
inset 0 1px 0 rgba(255,255,255,.8),
inset 0 -1px 0 rgba(12,24,56,.05);
outline:none;
}
html body :is(#home-landing, .hero-preview) .home-hero-portal:hover .home-hero-portal-mark,
html body :is(#home-landing, .hero-preview) .home-hero-portal:focus-visible .home-hero-portal-mark{
opacity:1;
transform:scale(1.06);
box-shadow:
0 8px 20px color-mix(in srgb, var(--portal-accent) 48%, transparent),
inset 0 1px 0 rgba(255,255,255,.55);
}
html body :is(#home-landing, .hero-preview) .home-hero-portal:active{
transform:translateY(-1px) scale(1.01);
}
html body :is(#home-landing, .hero-preview) .home-hero-portal:active .home-hero-portal-mark{
opacity:1;
transform:scale(.98);
}
html body :is(#home-landing, .hero-preview) .home-hero-portal-label{
position:relative;
z-index:1;
width:auto;
height:auto;
margin:0;
padding:0;
overflow:visible;
clip:auto;
white-space:nowrap;
border:0;
direction:rtl;
text-align:right;
font-size:calc(clamp(12px, 1.05vw, 14px) * var(--portal-label-size, 1));
font-weight:800;
letter-spacing:.01em;
line-height:1.25;
color:#0f1b36;
text-shadow:
0 1px 0 rgba(255,255,255,.78),
0 0 14px rgba(255,255,255,.45);
}
/* Let clicks reach portals under the transparent copy plane; keep real CTAs clickable. */
html body :is(#home-landing, .hero-preview) .home-hero-copy{
pointer-events:none;
}
html body :is(#home-landing, .hero-preview) .home-hero-copy a,
html body :is(#home-landing, .hero-preview) .home-hero-actions,
html body :is(#home-landing, .hero-preview) .home-hero-actions a{
pointer-events:auto;
position:relative;
z-index:4;
}
/* Touch / no-hover: keep marks discoverable. */
@media (hover: none), (pointer: coarse){
html body :is(#home-landing, .hero-preview) .home-hero-portal-mark{
opacity:1;
transform:none;
}
html body :is(#home-landing, .hero-preview) .home-hero-portal{
min-width:48px;
min-height:48px;
}
}
/* Mobile / cropped fallback: chip strip under the hero media. */
html body #home-landing .home-hero-portal-strip{
display:none;
gap:10px;
flex-wrap:wrap;
justify-content:center;
margin:14px auto 0;
padding:0 16px 6px;
max-width:960px;
}
html body #home-landing .home-hero-portal-strip[data-fallback="1"]{
display:flex;
}
html body #home-landing .home-hero-portal-strip a{
direction:ltr;
display:inline-flex;
align-items:center;
gap:10px;
min-height:48px;
padding:9px 14px 9px 12px;
border-radius:16px;
border:1px solid rgba(25,40,76,.12);
background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(247,249,255,.88));
color:#18233f;
text-decoration:none;
font-size:13px;
font-weight:800;
box-shadow:
0 8px 20px rgba(18,35,70,.08),
inset 0 1px 0 rgba(255,255,255,.9);
transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
html body #home-landing .home-hero-portal-strip a:hover,
html body #home-landing .home-hero-portal-strip a:focus-visible{
background:linear-gradient(180deg, #fff, #f4f7ff);
transform:translateY(-2px);
box-shadow:0 12px 26px rgba(18,35,70,.14);
outline:none;
}
html body #home-landing .home-hero-portal-strip a:active{
transform:translateY(0);
}
@media (max-width:900px){
/* Stacked mobile hero: prefer the chip strip; hide absolute tiles. */
html body :is(#home-landing, .hero-preview) .home-hero-portals{
display:none;
}
html body #home-landing .home-hero-portal-strip[data-fallback="1"]{
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:10px;
margin-top:10px;
padding:0 16px 2px;
justify-content:stretch;
}
html body #home-landing .home-hero-portal-strip a{
width:100%;
justify-content:flex-start;
border-radius:16px;
}
}
@media (prefers-reduced-motion: reduce){
html body :is(#home-landing, .hero-preview) .home-hero-portals,
html body :is(#home-landing, .hero-preview) .home-hero-portal,
html body :is(#home-landing, .hero-preview) .home-hero-portal-mark,
html body #home-landing .home-hero-portal-strip a{
transition:none !important;
}
html body :is(#home-landing, .hero-preview) .home-hero-portal:hover,
html body :is(#home-landing, .hero-preview) .home-hero-portal:focus-visible,
html body :is(#home-landing, .hero-preview) .home-hero-portal:active{
transform:none;
}
html body :is(#home-landing, .hero-preview) .home-hero-portal:hover .home-hero-portal-mark,
html body :is(#home-landing, .hero-preview) .home-hero-portal:focus-visible .home-hero-portal-mark,
html body :is(#home-landing, .hero-preview) .home-hero-portal:active .home-hero-portal-mark{
transform:none;
}
}
/* Studio preview: stack portals on the photo so Appearance Studio can judge glass. */
html body .hero-preview .home-hero-portals{
display:flex;
flex-direction:column;
align-items:flex-end;
justify-content:center;
gap:10px;
padding:20px 24px;
pointer-events:none;
opacity:1;
}
html body .hero-preview .home-hero-portal{
position:relative;
left:auto !important;
top:auto !important;
width:auto !important;
height:auto !important;
pointer-events:auto;
}