/* ═══════════════════════════════════════════════════════════
   home.css — homepage "/" (porting di HomeLayout.vue + Welcome.vue +
   layouts/parallax-header.scss). RICHIEDE base.css (palette/font) e tdl.css
   (navbar, cornice, griglia, pergamena .tdl-sheet, footer).
═══════════════════════════════════════════════════════════ */

/* ── Header: titolo sopra la scena a parallasse ───────────── */
.home-header { position: relative; }
.header-style { width: 100%; height: 800px; flex: 0 1 auto; background-color: var(--bg-deep); }

.homepage-title {
    max-width: 800px; text-align: center; position: absolute; margin: auto;
    left: 0; right: 0; top: 0; bottom: 0; z-index: 1; overflow: hidden;
}
.homepage-title-content { position: absolute; top: 10rem; bottom: 0; left: 0; right: 0; margin: auto; width: 100%; height: fit-content; }

.tdl-home-title {
    font-family: 'Ringbearer', Georgia, serif; font-size: 5rem; padding: 1rem;
    background: 50% 100% / 50% 50% no-repeat radial-gradient(ellipse at bottom, #fff, transparent, transparent);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: homeReveal 3000ms ease-in-out forwards 200ms, homeGlow 2500ms linear infinite 2000ms;
}
.tdl-home-title::after {
    content: ""; position: absolute; top: -50%; bottom: 0; left: 0; right: 0; margin: auto; height: 30rem;
    background: url("/assets/tdl/img/alchemy-1.png") no-repeat 50% / contain;
    opacity: .4; animation: homeRotation 80s infinite linear; pointer-events: none;
}
.tdl-home-title .smaller { font-size: 3rem; }
/* Telefono e tablet (barra compatta, audit 2026-09-16): la scena è alta quanto lo
   schermo e non 800 px fissi (a 360×640 il pulsante finiva sotto la piega), il
   contenuto è centrato in flex invece che a top 10rem, titolo in clamp. */
@media (max-width: 991.98px) {
    .header-style { height: min(800px, 100vh); height: min(800px, 100svh); }
    .homepage-title { display: flex; align-items: center; justify-content: center; padding: var(--tdl-nav-h) 1rem 0; }
    .homepage-title-content { position: relative; top: auto; bottom: auto; margin: 0; }
    .tdl-home-title { display: block; font-size: clamp(3.2rem, 19vw, 5rem); padding: 1rem .5rem; }
    .tdl-home-title .smaller { font-size: clamp(2rem, 11vw, 3rem); }
    .tdl-home-title::after { height: clamp(18rem, 95vw, 30rem); }
    .login-button { margin-top: 1.5rem; height: 4rem; }
}
@keyframes homeReveal { 80% { letter-spacing: 8px; } 100% { background-size: 200% 200%; } }
@keyframes homeGlow { 40% { text-shadow: 0 0 8px #fff; } }
@keyframes homeRotation { from { transform: rotate(0deg); } to { transform: rotate(359deg); } }

/* bottone "Entra nella land": cornice SVG usata come maschera, così il colore
   è dato da background-color e può transizionare */
.login-button {
    position: relative; width: 100%; max-width: 24rem; height: 4.5rem; margin-top: 50px;
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: 0; outline: none; box-shadow: none; appearance: none; cursor: pointer;
    text-decoration: none; transform-origin: center;
    transition: transform .35s cubic-bezier(.23, 1, .32, 1);
}
.login-button:hover, .login-button:focus { background: none; box-shadow: none; outline: none; color: inherit; transform: scale(1.06); }
.login-button::before {
    content: ""; position: absolute; inset: 0; z-index: 0; background-color: var(--text-main);
    -webkit-mask: url("/assets/portale/home/img/button-out-white.svg") no-repeat center / contain;
            mask: url("/assets/portale/home/img/button-out-white.svg") no-repeat center / contain;
    transition: background-color .35s ease, filter .35s ease;
}
.login-button:hover::before, .login-button:focus::before {
    background-color: var(--gold);
    filter: drop-shadow(0 0 7px rgba(201, 168, 76, .55)) drop-shadow(0 3px 10px rgba(0, 0, 0, .55));
}
.login-button-text {
    position: relative; z-index: 1; font-family: 'minor-headers', Georgia, serif; font-size: 1.05rem;
    text-transform: uppercase; color: #fff; letter-spacing: .22em;
    transition: text-shadow .35s ease, color .35s ease;
}
.login-button:hover .login-button-text, .login-button:focus .login-button-text { color: var(--gold-light); text-shadow: 0 0 8px rgba(201, 168, 76, .6); }

/* ── Scena a parallasse (layouts/parallax-header.scss; JS: home.js) ── */
.parallax-container { overflow: hidden; margin: 0; padding: 0; position: relative; display: table; height: 100%; width: 100%; left: 0; top: 0; }
.parallax-scene { position: relative; overflow: hidden; list-style: none; }
.parallax-layer { position: absolute; will-change: transform; }
.parallax-scene, .parallax-layer { display: block; height: 100%; width: 100%; padding: 0; margin: 0; }
.header-parallax-base {
    width: 106%; background: url("/assets/portale/home/img/base.jpg") no-repeat 50% 35% / cover;
    position: absolute; left: -3%; top: -5%; bottom: -150px;
}
.header-parallax-1 { height: 110%; width: 540px; background: url("/assets/portale/home/img/layer1.png") no-repeat 50% 100%; position: absolute; bottom: -70px; right: 65%; margin: 0; }
.header-parallax-2 { height: 120%; width: 350px; background: url("/assets/portale/home/img/layer2.png") no-repeat 50% 100%; position: absolute; bottom: -70px; right: 58%; margin: 0; }
.parallax-smoke-layer { opacity: .55; }
.parallax-smoke { position: absolute; inset: 0; }
/* telefono: i livelli stanno a destra 65%/58% per una scena da 1300 px; a 375 px
   la figura incappucciata (layer2, 350 px) restava quasi tutta fuori a sinistra
   e il tubo (layer1, 540 px) del tutto. Figura riportata dentro, tubo via. */
@media (max-width: 767.98px) {
    .header-parallax-1 { display: none; }
    .header-parallax-2 { right: 30%; }
}

/* ── Corpo ────────────────────────────────────────────────── */
.tdl-main-container { width: 100%; min-height: 505px; position: relative; text-align: left; }
.tdl-gap-1 { display: block; height: 30px; }
.section-title { font-family: 'Ringbearer', Georgia, serif; color: var(--text-main); z-index: 1; }
.text {
    line-height: 1.5; font-family: 'base-text', Georgia, serif; font-weight: normal; font-variant: normal;
    text-transform: none; text-decoration: none; text-align: justify; color: var(--text-main);
}
.text-action { font-style: italic; color: #c08a52; }   /* narrazione PNG: ambra desaturata, in tono con l'oro */
.text-decision { color: var(--text-muted); }

/* pergamena col ladro (.tdl-sheet dà carta e bordi strappati) */
.character-creator {
    width: 100%; margin: auto; min-height: 760px;
    background: url("/assets/portale/home/img/thief-landing.png") no-repeat 80% 0 / auto, url("/assets/tdl/img/paper-texture-blk.jpg") repeat center;
}
/* griglia: titolo e testo nei primi 10/12 (il ladro sta a destra), azioni su
   tutta la riga; contenuto centrato in verticale nei 760 px come prima */
.character-creator-wrapper {
    width: 100%; margin: auto; min-height: 760px;
    display: grid; grid-template-columns: minmax(0, 5fr) 1fr;
    grid-template-areas: "h1 ." "testo ." "azioni azioni";
    align-content: center;
}
.character-h1 { grid-area: h1; margin: 1rem 1rem .4rem; }
.character-txt {
    grid-area: testo; margin: 0 1rem 1rem;
    font-size: 1.2rem; line-height: 1.3; position: relative;
}
.character-txt::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    backdrop-filter: blur(2px); filter: blur(2px); transform: translate3d(0, 0, 0);
}
.character-txt-inner { position: relative; z-index: 1; }
@media (min-width: 1801px) { .character-txt { margin-right: 150px; } }
.home-actions { grid-area: azioni; display: flex; flex-direction: column; justify-content: center; }
@media (min-width: 576px) { .home-actions { flex-direction: row; } }
/* telefono: azioni subito sotto il titolo, testo più piccolo e a bandiera (a
   19 px giustificato su 295 px le righe si aprivano), il ladro in basso a destra
   dietro i pulsanti invece che dietro il testo */
@media (max-width: 767.98px) {
    /* solo carta: il ladro (1300 px) finiva sempre dietro il testo, e la maschera
       chiara sotto le righe ambra era il punto meno leggibile della pagina */
    .character-creator { min-height: 0; background-image: url("/assets/tdl/img/paper-texture-blk.jpg"); background-repeat: repeat; background-position: center; background-size: auto; }
    .character-creator-wrapper { min-height: 0; grid-template-columns: 1fr; grid-template-areas: "h1" "azioni" "testo"; padding-top: 1.5rem; padding-bottom: 1.5rem; }
    .character-h1 { font-size: 2.1rem; margin: 0 .5rem .6rem; }
    .home-actions { margin: 0 0 1.2rem; }
    .character-txt { margin: 0 .5rem; font-size: 1.05rem; line-height: 1.45; }
    .character-txt .text { text-align: left; }
}

.character-button, .contact-button {
    position: relative; z-index: 5; height: 2.5rem;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--gold); border-radius: 0; appearance: none; outline: none; cursor: pointer;
    text-decoration: none; transition: background .2s, box-shadow .2s;
}
.character-button { width: auto; margin: .35rem .6rem; padding: 0 30px; background: var(--gold-glow); }
.contact-button { width: auto; margin: 0 auto; padding: 0 28px; background: transparent; }
.character-button:hover, .character-button:focus, .contact-button:hover, .contact-button:focus { background: var(--gold); box-shadow: 0 0 18px rgba(201, 168, 76, .25); }
.character-button-text, .contact-button-text {
    font-family: 'minor-headers', Georgia, serif; color: var(--gold); letter-spacing: .22em; text-transform: uppercase;
    transition: color .2s;
}
.character-button-text { font-size: .95rem; }
.contact-button-text { font-size: .9rem; line-height: 1; }
.character-button:hover .character-button-text, .contact-button:hover .contact-button-text { color: var(--bg-void); }

/* ── Ultime novità ────────────────────────────────────────── */
.main-news { width: 100%; margin: auto; position: relative; display: flex; flex-direction: column; }
.main-news-wrapper { width: 100%; margin: auto; min-height: 760px; padding: 2rem 1rem; display: flex; flex-direction: column; }
.main-news-title { padding-top: 0; }
@media (min-width: 576px) { .main-news-title { padding-top: 2rem; } }
.main-news-body { flex: 1; }
.main-news-footer { display: flex; justify-content: center; align-items: center; }
@media (max-width: 767.98px) { .main-news-footer { margin-top: 2rem; } }   /* sul telefono i riquadri sono impilati: aria prima di «Contattaci» */
.topic-text { color: var(--gold-light); letter-spacing: .08em; text-transform: uppercase; }

/* riquadro stile scheda: pannello near-opaco + bordo oro + anello tenue */
.news-messages {
    position: relative; display: flex; flex-direction: column; margin-top: .5rem; width: 100%; height: 100%;
    max-height: 500px; overflow: hidden; color: var(--text-main); font-family: 'base-text', Georgia, serif;
    background: rgba(14, 14, 14, .97); border: 1px solid var(--border);
    box-shadow: 0 8px 40px rgba(0, 0, 0, .55), 0 0 0 1px rgba(201, 168, 76, .06);
}
.news-head {
    flex-shrink: 0; display: flex; align-items: baseline; gap: 1rem;
    font-family: 'minor-headers', Georgia, serif; font-size: .8rem; letter-spacing: .28em;
    text-transform: uppercase; color: var(--gold); padding: .55rem .9rem;
    background: linear-gradient(180deg, rgba(50, 37, 35, .7) 0%, rgba(255, 255, 255, 0) 100%);
    border-bottom: 1px solid rgba(201, 168, 76, .18);
    filter: drop-shadow(-1px 4px 3px rgba(0, 0, 0, .5));
}
/* corpo scrollabile (al posto di vuescroll: barra nativa sottile color cuoio) */
.news-body { flex: 1; min-height: 0; padding: .35rem .7rem; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(72, 45, 0, .5) transparent; }
.news-body::-webkit-scrollbar { width: .5rem; }
.news-body::-webkit-scrollbar-thumb { background: rgba(72, 45, 0, .5); }
.news-head-link { margin-left: auto; font-size: .7rem; letter-spacing: .12em; text-transform: none; color: var(--text-muted); text-decoration: none; white-space: nowrap; }
.news-head-link:hover { color: var(--gold); }
.news-discord { padding: 0; display: flex; }
.news-discord iframe { width: 100%; height: 100%; border: 0; display: block; }
/* telefono: niente scroll dentro lo scroll — i riquadri crescono, si vedono le
   prime 3 voci con il testo a 6 righe, il resto sta nel forum. Discord: senza
   un'altezza della colonna l'iframe collassava a 158 px. */
@media (max-width: 767.98px) {
    .news-messages { height: auto; max-height: none; }
    .news-body { overflow: visible; }
    .news-messages .message:nth-child(n+4) { display: none; }
    .news-messages .message > span:last-child { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; }
    .news-discord iframe { height: 380px; }
}
.news-messages .message { border-bottom: 1px solid rgba(201, 168, 76, .12); padding: .5rem; color: var(--text-main); margin: 0; }
.news-messages .message img { max-width: 100%; }
.serverWm     { font-size: 1.2rem; font-weight: 700; color: gray; }
.serverAdmin  { font-size: 1.2rem; font-weight: 700; color: #009fe4; }
.serverStaff  { font-size: 1.2rem; font-weight: 700; color: #009900; }
.serverNames  { font-size: 1.2rem; font-weight: 700; color: #8B1403; }

.ad-container { margin: auto; text-align: center; padding: 0 .75rem; }