/* ============================================================
RMP — Enhancement Layer (rmp-enhance.css)
------------------------------------------------------------
ADDITIVE polish only. No structural/content changes.
Loads AFTER the theme CSS so it refines, never restructures.
100% revertible: remove the in layouts/app.blade.php.
Scope rules (so it never fights the existing GSAP/ScrollTrigger
reveal system in app-enhanced.js):
• Reveal/opacity/entrance transforms -> left to GSAP.
• Hover/idle micro-interactions -> CSS only here,
applied to non-animated props (shadow, filter, border,
background) or to INNER children GSAP doesn't touch.
============================================================ */
/* ---- 0. Motion safety + global feel ---------------------- */
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
html{scroll-behavior:smooth}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
img{image-rendering:auto}
/* subtle, brand-aligned scrollbar */
*{scrollbar-width:thin;scrollbar-color:#b8902f transparent}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-thumb{background:linear-gradient(#d8b14e,#b8902f);border-radius:9px;border:2px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-track{background:transparent}
::selection{background:#d8b14e;color:#2a1d08}
/* accessible focus ring (keyboard only) */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible,
input:focus-visible,textarea:focus-visible,select:focus-visible{
outline:2px solid #d8b14e;outline-offset:3px;border-radius:4px;
}
/* ---- 1. Typography & spacing refinement ------------------ */
.section-heading{letter-spacing:.005em;line-height:1.08;text-wrap:balance}
.section-subheading{letter-spacing:.04em;line-height:1.6}
h1,h2,h3,.hero-studio-name,.section-heading{text-wrap:balance}
p{text-wrap:pretty}
/* gentle, non-breaking rhythm: only adds breathing room */
.legends-header,.section-header{margin-bottom:clamp(2rem,4vw,3.2rem)}
.chrome-divider{position:relative;overflow:visible}
.chrome-divider::after{content:"";position:absolute;left:50%;top:50%;width:34%;height:1px;transform:translate(-50%,-50%);
background:linear-gradient(90deg,transparent,rgba(216,177,78,.65),transparent);opacity:.0;animation:rmpShimmer 5s ease-in-out infinite}
@keyframes rmpShimmer{0%,100%{opacity:0}50%{opacity:1}}
/* ---- 2. Interactive micro-polish (non-GSAP props) -------- */
a,button,.btn,.stat-item,.legend-card,.film-card,.news-card,.legend-portrait,
.btn-primary,.btn-outline-primary,.btn-ghost,.btn-accent{
transition:box-shadow .45s cubic-bezier(.19,1,.22,1),
border-color .45s cubic-bezier(.19,1,.22,1),
background-color .45s cubic-bezier(.19,1,.22,1),
color .35s ease, filter .45s ease;
}
/* buttons: tasteful lift (buttons aren't GSAP-controlled) */
.btn,.btn-primary,.btn-accent,.btn-glow,.btn-outline-primary,.btn-ghost{
transition:transform .4s cubic-bezier(.19,1,.22,1),box-shadow .4s cubic-bezier(.19,1,.22,1),
background-color .4s ease,color .35s ease,border-color .4s ease!important;
will-change:transform;
}
.btn:hover,.btn-primary:hover,.btn-accent:hover,.btn-glow:hover,
.btn-outline-primary:hover,.btn-ghost:hover{
transform:translateY(-3px);
box-shadow:0 14px 34px rgba(184,144,47,.28)!important;
}
.btn:active{transform:translateY(-1px)}
/* stat tiles: gentle glow lift on hover (shadow/filter only) */
.stat-item{border-radius:14px;will-change:filter}
.stat-item:hover{filter:brightness(1.04)}
.stat-item:hover .stat-number{text-shadow:0 0 26px rgba(216,177,78,.35)}
.stat-number{transition:text-shadow .4s ease}
/* legend cards: smoother flip + depth (transform on INNER only) */
.legend-card-inner{transition:transform .8s cubic-bezier(.19,1,.22,1)!important;will-change:transform}
.legend-card{border-radius:16px}
.legend-card:hover{box-shadow:0 24px 60px rgba(90,66,28,.28)}
.legend-portrait{transition:filter .5s ease,transform .6s cubic-bezier(.19,1,.22,1)}
.legend-card:hover .legend-portrait{filter:saturate(1.08) contrast(1.04)}
.legend-role-badge{transition:letter-spacing .4s ease}
.legend-card:hover .legend-role-badge{letter-spacing:.16em}
/* generic content cards */
.card,.glass-card,.panel,.film-card,.news-card,.media-card{
transition:box-shadow .5s cubic-bezier(.19,1,.22,1),border-color .5s ease,filter .5s ease!important;
}
.film-card:hover,.news-card:hover,.media-card:hover{
box-shadow:0 26px 64px rgba(90,66,28,.24)!important;
}
/* image zoom uses an inner img so it won't fight card reveal transforms */
.film-card img,.news-card img,.media-card img,.media-highlight img{
transition:transform 1.1s cubic-bezier(.19,1,.22,1),filter .6s ease;will-change:transform;
}
.film-card:hover img,.news-card:hover img,.media-card:hover img,.media-highlight:hover img{
transform:scale(1.06);filter:saturate(1.06)
}
/* animated link underline for inline text links + nav */
.rmp-link,.footer a,.nav-link,.section-link{position:relative}
.rmp-link::after,.section-link::after{content:"";position:absolute;left:0;bottom:-3px;height:1px;width:0;
background:currentColor;transition:width .4s cubic-bezier(.19,1,.22,1)}
.rmp-link:hover::after,.section-link:hover::after{width:100%}
/* ---- 2b. Platform inner-page cards & article text -------- */
.movie-card,.event-card,.cast-card,.crew-card,.artifact-card,.legend-card,.news-card{
transition:box-shadow .5s cubic-bezier(.19,1,.22,1),border-color .5s ease,filter .5s ease;
border-radius:14px;
}
.movie-card:hover,.event-card:hover,.cast-card:hover,.crew-card:hover,
.artifact-card:hover,.news-card:hover{
box-shadow:0 24px 60px rgba(90,66,28,.22);
}
.movie-card,.event-card,.cast-card,.crew-card,.artifact-card{overflow:hidden}
.movie-card img,.event-card img,.cast-card img,.crew-card img,.artifact-card img{
transition:transform 1.1s cubic-bezier(.19,1,.22,1),filter .6s ease;will-change:transform;
}
.movie-card:hover img,.event-card:hover img,.cast-card:hover img,
.crew-card:hover img,.artifact-card:hover img{transform:scale(1.05);filter:saturate(1.05)}
/* long-form reading comfort (news / bios) */
.article-body{font-size:1.04rem;line-height:1.8;letter-spacing:.002em}
.article-body p{margin-bottom:1.15rem;max-width:72ch}
.article-body h2,.article-body h3{margin:2rem 0 .8rem;line-height:1.2}
.article-body img{border-radius:8px;margin:1.4rem 0}
/* ---- 3. Imagery treatment -------------------------------- */
img:not([src*=".svg"]){backface-visibility:hidden}
.legend-portrait,.film-card,.news-card,.media-card{overflow:hidden}
/* fade-in for lazy images once loaded (paired with rmp-enhance.js) */
img.rmp-lazy{opacity:0;transition:opacity .7s ease}
img.rmp-lazy.rmp-loaded,img.rmp-lazy[data-keep]{opacity:1}
/* ---- 4. Mobile polish ------------------------------------ */
@media (max-width:768px){
html,body{overflow-x:hidden;max-width:100%}
.section-heading{font-size:clamp(1.7rem,7.5vw,2.4rem);line-height:1.12}
.section-subheading{font-size:.95rem}
.stats-grid{gap:1rem!important}
/* comfortable tap targets */
a,button,.btn,.legend-card,.nav-link,.rmp-mobile-link{min-height:44px}
.btn{padding-top:.8rem;padding-bottom:.8rem}
/* kill accidental horizontal scroll from wide decorative elements */
.stats-bar,.legends-section,section{max-width:100vw}
}
@media (max-width:480px){
.stats-grid{grid-template-columns:repeat(2,1fr)!important}
.section-heading{font-size:clamp(1.5rem,8vw,2rem)}
}
/* ---- 4b. Form fields (contact / careers / reviews) ------- */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=submit]):not([type=button]),
textarea,select,
.form-control,.form-select,.sp-input,.sp-textarea,.rw-name-input,.rw-chat-input,.ri-link-input{
transition:border-color .35s cubic-bezier(.19,1,.22,1),box-shadow .35s cubic-bezier(.19,1,.22,1),background-color .35s ease;
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=submit]):not([type=button]):focus,
textarea:focus,select:focus,
.form-control:focus,.form-select:focus,.sp-input:focus,.sp-textarea:focus,
.rw-name-input:focus,.rw-chat-input:focus,.ri-link-input:focus{
border-color:#b8902f!important;
box-shadow:0 0 0 3px rgba(216,177,78,.18)!important;
outline:none!important;
}
::placeholder{opacity:.62}
label{letter-spacing:.01em}
/* generic chips / pills: subtle hover (bespoke modules) */
[class$="-chip"],[class*="-pill"],.badge{transition:transform .3s cubic-bezier(.19,1,.22,1),box-shadow .3s ease,filter .3s ease}
[class$="-chip"]:hover,[class*="-pill"]:hover{filter:brightness(1.06)}
/* details / summary (FAQ-style) */
summary{cursor:pointer;transition:color .3s ease}
/* ---- 6. Films & Events showcase (focused polish) --------- */
/* Cards carry inline `transition:all .3s` already, so these hover
states animate cleanly. !important only where it must beat an
inline border/shadow. */
.movie-card,.event-card{will-change:transform,box-shadow,border-color}
.movie-card:hover,.event-card:hover{
transform:translateY(-6px);
border-color:rgba(216,177,78,.55)!important;
box-shadow:0 30px 66px rgba(0,0,0,.6),0 0 0 1px rgba(216,177,78,.15)!important;
}
.movie-card:hover img,.event-card:hover img{transform:scale(1.07)!important}
/* poster sheen on hover */
.movie-card::after,.event-card::after{
content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;
background:linear-gradient(115deg,transparent 40%,rgba(255,247,224,.10) 50%,transparent 60%);
transition:opacity .5s ease;
}
.movie-card:hover::after,.event-card:hover::after{opacity:1}
/* detail-page genre/status chips: gentle lift (inline-styled spans) */
section span[style*="border-radius:20px"]{transition:transform .3s cubic-bezier(.19,1,.22,1),filter .3s ease}
section span[style*="border-radius:20px"]:hover{transform:translateY(-1px);filter:brightness(1.08)}
/* Legends & News: complement their existing hover with a gold title
(the card already carries an inline `transition:color`; !important
is required only to override the inline color:#fff). */
.legend-card:hover h3,.news-card:hover h3,
.movie-card:hover h3,.event-card:hover h3{color:#d4af37!important}
/* ---- 5. Print / safety ----------------------------------- */
@media print{.preloader,.three-bg,canvas{display:none!important}}