/* ========================================================================== Component — WordPhysicsHero Physics-based interactive hero: pill-shaped word objects that fall and stack using real collision physics. ========================================================================== */ /* ---- Physics background root ---- Direct child so position:fixed dimensions are always the viewport. z-index: 0 means .app (z-index:1) paints on top. Toggled hidden by showView() when not on the welcome screen. */ #physics-bg { position: fixed; inset: 0; z-index: 0; /* pointer-events: auto (default) — pills are interactive in uncovered areas */ } /* Hidden state (when results / error / bookmarks are shown) */ #physics-bg[hidden] { display: none; } /* ---- Wrapper ---- */ .physics-hero-wrap { width: 100%; height: 100%; display: flex; flex-direction: column; } .physics-hero { position: relative; width: 100%; flex: 1; min-height: 0; overflow: hidden; touch-action: none; } /* ============================================================ Pill ============================================================ */ .physics-pill { position: absolute; top: 0; left: 0; height: var(--pill-h, 80px); /* width is set inline by React (varies per word) */ border-radius: 9999px; background-color: var(--c-bg-elevated); border: 1.5px solid var(--c-border); display: inline-flex; align-items: center; justify-content: center; padding: 0 calc(var(--pill-h, 80px) * 0.35); cursor: grab; user-select: none; will-change: transform; z-index: 1; overflow: hidden; outline: none; -webkit-tap-highlight-color: transparent; transition: box-shadow 200ms ease, border-color 200ms ease, background-color 200ms ease; } /* Hover / keyboard-focus —————————————————————————————————— */ .physics-pill:hover, .physics-pill:focus-visible { box-shadow: 0 4px 20px var(--c-shadow-lg), 0 1px 5px var(--c-shadow); border-color: var(--c-accent); z-index: 20; /* lift above neighbouring pills */ } .physics-pill:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; } .physics-pill:active { cursor: grabbing; box-shadow: 0 1px 6px var(--c-shadow); } /* ---- Word label ---- */ .pill-word { font-family: var(--font-serif); font-size: var(--pill-font, 22px); font-weight: 500; color: var(--c-text-primary); white-space: nowrap; pointer-events: none; line-height: 1; transition: transform 220ms var(--ease-spring); } .physics-pill:hover .pill-word, .physics-pill:focus-visible .pill-word { transform: translateX(-26px); } /* ---- Arrow navigation button ---- */ .pill-arrow-btn { position: absolute; right: calc(var(--pill-h, 80px) * 0.22); width: min(54px, calc(var(--pill-h, 80px) * 0.54)); height: min(54px, calc(var(--pill-h, 80px) * 0.54)); border-radius: 50%; background: var(--c-accent); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #fff; flex-shrink: 0; padding: 0; /* Hidden until hover — slides in from the right */ opacity: 0; transform: scale(0.5) translateX(8px); pointer-events: none; transition: opacity 190ms ease, transform 230ms var(--ease-spring); } .physics-pill:hover .pill-arrow-btn, .physics-pill:focus-visible .pill-arrow-btn { opacity: 1; transform: scale(1) translateX(0); pointer-events: auto; } .pill-arrow-btn:hover { background: var(--c-accent-hover); transform: scale(1.08) translateX(0); } .pill-arrow-btn svg { width: 42%; height: 42%; } /* ---- Wiktionary credit pill ---- */ .pill--link { background-color: var(--c-accent-soft); border-color: var(--c-accent); } .pill--link .pill-word { color: var(--c-accent); font-style: italic; } /* ============================================================ Responsive ============================================================ */ @media (max-width: 640px) { /* On mobile the button is a flex item (position:static), so the pill uses a row layout: [vGap][text][vGap][btn][vGap]. vGap = (pillH - btnH) / 2 — matches the vertical gap on all sides. */ .physics-pill { justify-content: center; padding-left: calc((var(--pill-h, 75px) - min(54px, calc(var(--pill-h, 75px) * 0.54))) / 2); padding-right: calc((var(--pill-h, 75px) - min(54px, calc(var(--pill-h, 75px) * 0.54))) / 2); gap: calc((var(--pill-h, 75px) - min(54px, calc(var(--pill-h, 75px) * 0.54))) / 2); } .pill-word { transform: none; /* no shift needed — layout handles spacing */ } .pill-arrow-btn { position: static; /* becomes a flex item so it sits right of the text */ flex-shrink: 0; opacity: 1; transform: scale(1); pointer-events: auto; } }